<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - 从 AngularJS 升级到 Angular</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-upgrade sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.angular.io/" title="博客"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的基本原理" aria-pressed="false"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供商与 NgModule" target="_self"><span>服务提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供商类型的更多知识。" target="_self"><span>DI 提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="true"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 expanded selected ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="true"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 expanded selected ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter-io.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="guide-upgrade"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/upgrade.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="upgrading-from-angularjs-to-angular" translation-result="on">从 AngularJS 升级到 Angular<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#upgrading-from-angularjs-to-angular"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="准备工作"><a href="guide/upgrade#preparation">准备工作</a></li><li class="h3 ng-star-inserted" title="遵循 AngularJS 风格指南"><a href="guide/upgrade#follow-the-angularjs-style-guide">遵循 AngularJS 风格指南</a></li><li class="h3 ng-star-inserted" title="使用模块加载器"><a href="guide/upgrade#using-a-module-loader">使用模块加载器</a></li><li class="h3 secondary ng-star-inserted" title="迁移到 TypeScript"><a href="guide/upgrade#migrating-to-typescript">迁移到 TypeScript</a></li><li class="h3 secondary ng-star-inserted" title="使用组件型指令"><a href="guide/upgrade#using-component-directives">使用组件型指令</a></li><li class="h2 secondary ng-star-inserted" title="使用升级适配器进行升级"><a href="guide/upgrade#upgrading-with-ngupgrade">使用升级适配器进行升级</a></li><li class="h3 secondary ng-star-inserted" title="升级模块工作原理"><a href="guide/upgrade#how-ngupgrade-works">升级模块工作原理</a></li><li class="h3 secondary ng-star-inserted" title="通过 Angular 的 NgModule 来使用 UpgradeModule"><a href="guide/upgrade#using-upgrademodule-with-angular-ngmodules">通过 Angular 的 <em>NgModule</em> 来使用 UpgradeModule</a></li><li class="h3 secondary ng-star-inserted" title="引导混合式应用程序"><a href="guide/upgrade#bootstrapping-hybrid-applications">引导混合式应用程序</a></li><li class="h3 secondary ng-star-inserted" title="在 AngularJS 的代码中使用 Angular 的组件"><a href="guide/upgrade#using-angular-components-from-angularjs-code">在 AngularJS 的代码中使用 Angular 的组件</a></li><li class="h3 secondary ng-star-inserted" title="从 Angular 代码中使用 AngularJS 组件型指令"><a href="guide/upgrade#using-angularjs-component-directives-from-angular-code">从 Angular 代码中使用 AngularJS 组件型指令</a></li><li class="h3 secondary ng-star-inserted" title="把 AngularJS 的内容投影到 Angular 组件中"><a href="guide/upgrade#projecting-angularjs-content-into-angular-components">把 AngularJS 的内容投影到 Angular 组件中</a></li><li class="h3 secondary ng-star-inserted" title="把 Angular 的内容透传进 AngularJS 的组件型指令"><a href="guide/upgrade#transcluding-angular-content-into-angularjs-component-directives">把 Angular 的内容透传进 AngularJS 的组件型指令</a></li><li class="h3 secondary ng-star-inserted" title="让 AngularJS 中的依赖可被注入到 Angular"><a href="guide/upgrade#making-angularjs-dependencies-injectable-to-angular">让 AngularJS 中的依赖可被注入到 Angular</a></li><li class="h3 secondary ng-star-inserted" title="让 Angular 的依赖能被注入到 AngularJS 中"><a href="guide/upgrade#making-angular-dependencies-injectable-to-angularjs">让 Angular 的依赖能被注入到 AngularJS 中</a></li><li class="h2 secondary ng-star-inserted" title="惰性加载 AngularJS"><a href="guide/upgrade#lazy-loading-angularjs">惰性加载 AngularJS</a></li><li class="h3 secondary ng-star-inserted" title="为惰性加载 AngularJS 创建一个服务"><a href="guide/upgrade#create-a-service-to-lazy-load-angularjs">为惰性加载 AngularJS 创建一个服务</a></li><li class="h3 secondary ng-star-inserted" title="创建一个用来渲染 AngularJS 内容的组件"><a href="guide/upgrade#create-a-component-to-render-angularjs-content">创建一个用来渲染 AngularJS 内容的组件</a></li><li class="h3 secondary ng-star-inserted" title="为那些 AngularJS 路由配置自定义路由匹配器"><a href="guide/upgrade#configure-a-custom-route-matcher-for-angularjs-routes">为那些 AngularJS 路由配置自定义路由匹配器</a></li><li class="h2 secondary ng-star-inserted" title="使用统一的 Angular 位置服务（Location）"><a href="guide/upgrade#using-the-unified-angular-location-service">使用统一的 Angular 位置服务（Location）</a></li><li class="h2 secondary ng-star-inserted" title="在混合式应用中使用 AOT 编译"><a href="guide/upgrade#using-ahead-of-time-compilation-with-hybrid-apps">在混合式应用中使用 AOT 编译</a></li><li class="h2 secondary ng-star-inserted" title="PhoneCat 升级教程"><a href="guide/upgrade#phonecat-upgrade-tutorial">PhoneCat 升级教程</a></li><li class="h3 secondary ng-star-inserted" title="切换到 TypeScript"><a href="guide/upgrade#switching-to-typescript">切换到 TypeScript</a></li><li class="h3 secondary ng-star-inserted" title="安装 Angular"><a href="guide/upgrade#installing-angular">安装 Angular</a></li><li class="h3 secondary ng-star-inserted" title="创建 AppModule"><a href="guide/upgrade#creating-the-appmodule">创建 <em>AppModule</em></a></li><li class="h3 secondary ng-star-inserted" title="引导 PhoneCat 的混合式应用"><a href="guide/upgrade#bootstrapping-a-hybrid-phonecat">引导 PhoneCat 的混合式应用</a></li><li class="h3 secondary ng-star-inserted" title="升级 Phone 服务"><a href="guide/upgrade#upgrading-the-phone-service">升级 <code>Phone</code> 服务</a></li><li class="h3 secondary ng-star-inserted" title="升级组件"><a href="guide/upgrade#upgrading-components">升级组件</a></li><li class="h3 secondary ng-star-inserted" title="对混合式应用做 AOT 编译"><a href="guide/upgrade#aot-compile-the-hybrid-app">对混合式应用做 AOT 编译</a></li><li class="h3 secondary ng-star-inserted" title="添加 Angular 路由器和引导程序"><a href="guide/upgrade#adding-the-angular-router-and-bootstrap">添加 Angular 路由器和引导程序</a></li><li class="h3 secondary ng-star-inserted" title="再见，AngularJS！"><a href="guide/upgrade#say-goodbye-to-angularjs">再见，AngularJS！</a></li><li class="h2 secondary ng-star-inserted" title="附录：升级 PhoneCat 的测试"><a href="guide/upgrade#appendix-upgrading-phonecat-tests">附录：升级 PhoneCat 的测试</a></li><li class="h3 secondary ng-star-inserted" title="E2E 测试"><a href="guide/upgrade#e2e-tests">E2E 测试</a></li><li class="h3 secondary ng-star-inserted" title="单元测试"><a href="guide/upgrade#unit-tests">单元测试</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="upgrading-from-angularjs-to-angular">Upgrading from AngularJS to Angular<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#upgrading-from-angularjs-to-angular"><i class="material-icons">link</i></a></h1><p translation-result="on"><em>Angular</em> 这个名字专指现在和未来的 Angular 版本，而 <em>AngularJS</em> 专指 Angular 的所有 1.x 版本。</p><p translation-origin="off"><em>Angular</em> is the name for the Angular of today and tomorrow.<br><em>AngularJS</em> is the name for all 1.x versions of Angular.</p><p translation-result="on">有很多大型 AngularJS 应用。 在决定迁移到 Angular 之前，首先要深入思考业务案例。 在这些案例中，最重要的部分之一是时间和需要付出的努力。 本章描述用于把 AngularJS 应用高效迁移到 Angular 平台的内置工具，每次讲一点点。</p><p translation-origin="off">AngularJS apps are great. Always consider the business case before moving to Angular. An important part of that case is the time and effort to get there. This guide describes the built-in tools for efficiently migrating AngularJS projects over to the Angular platform, a piece at a time.</p><p translation-result="on">有些应用可能比其它的升级起来简单，还有一些方法能让把这项工作变得更简单。 即使在正式开始升级过程之前，可以提前准备 AngularJS 的程序，让它向 Angular 看齐。 这些准备步骤几乎都是关于如何让代码更加松耦合、更有可维护性，以及用现代开发工具提高速度的。 这意味着，这种准备工作不仅能让最终的升级变得更简单，而且还能提升 AngularJS 程序的质量。</p><p translation-origin="off">Some applications will be easier to upgrade than others, and there are many ways to make it easier for yourself. It is possible to prepare and align AngularJS applications with Angular even before beginning the upgrade process. These preparation steps are all about making the code more decoupled, more maintainable, and better aligned with modern development tools. That means in addition to making the upgrade easier, you will also improve the existing AngularJS applications.</p><p translation-result="on">成功升级的关键之一是增量式的实现它，通过在同一个应用中一起运行这两个框架，并且逐个把 AngularJS 的组件迁移到 Angular 中。 这意味着可以在不必打断其它业务的前提下，升级更大、更复杂的应用程序，因为这项工作可以多人协作完成，在一段时间内逐渐铺开。 Angular <code>upgrade</code> 模块的设计目标就是让你渐进、无缝的完成升级。</p><p translation-origin="off">One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The <code>upgrade</code> module in Angular has been designed to make incremental upgrading seamless.</p><h2 id="preparation" translation-result="on">准备工作<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#preparation"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="preparation">Preparation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#preparation"><i class="material-icons">link</i></a></h2><p translation-result="on">AngularJS 应用程序的组织方式有很多种。当你想把它们升级到 Angular 的时候， 有些做起来会比其它的更容易些。即使在开始升级之前，也有一些关键的技术和模式可以让你将来升级时更轻松。</p><p translation-origin="off">There are many ways to structure AngularJS applications. When you begin to upgrade these applications to Angular, some will turn out to be much more easy to work with than others. There are a few key techniques and patterns that you can apply to future proof apps even before you begin the migration.</p><a id="follow-the-angular-styleguide"></a><h3 id="follow-the-angularjs-style-guide" translation-result="on">遵循 AngularJS 风格指南<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#follow-the-angularjs-style-guide"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="follow-the-angularjs-style-guide">Follow the AngularJS Style Guide<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#follow-the-angularjs-style-guide"><i class="material-icons">link</i></a></h3><p translation-result="on"><a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md">AngularJS 风格指南</a>收集了一些已证明能写出干净且可维护的 AngularJS 程序的模式与实践。 它包含了很多关于如何书写和组织 AngularJS 代码的有价值信息，同样重要的是，<strong>不应该</strong>采用的书写和组织 AngularJS 代码的方式。</p><p translation-origin="off">The <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md">AngularJS Style Guide</a> collects patterns and practices that have been proven to result in cleaner and more maintainable AngularJS applications. It contains a wealth of information about how to write and organize AngularJS code - and equally importantly - how <strong>not</strong> to write and organize AngularJS code.</p><p translation-result="on">Angular 是一个基于 AngularJS 中最好的部分构思出来的版本。在这种意义上，它的目标和 AngularJS 风格指南是一样的： 保留 AngularJS 中好的部分，去掉坏的部分。当然，Angular 还做了更多。 说这些的意思是：<em>遵循这个风格指南可以让你写出更接近 Angular 程序的 AngularJS 程序</em>。</p><p translation-origin="off">Angular is a reimagined version of the best parts of AngularJS. In that sense, its goals are the same as the AngularJS Style Guide's: To preserve the good parts of AngularJS, and to avoid the bad parts. There's a lot more to Angular than just that of course, but this does mean that <em>following the style guide helps make your AngularJS app more closely aligned with Angular</em>.</p><p translation-result="on">有一些特别的规则可以让使用 Angular 的 <code><a href="api/upgrade/static" class="code-anchor">upgrade/static</a></code> 模块进行<em>增量升级</em>变得更简单：</p><p translation-origin="off">There are a few rules in particular that will make it much easier to do <em>an incremental upgrade</em> using the Angular <code><a href="api/upgrade/static" class="code-anchor">upgrade/static</a></code> module:</p><ul><li><p translation-result="on"><a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility">单一规则</a> 规定每个文件应该只放一个组件。这不仅让组件更容易浏览和查找，而且还让你能逐个迁移它们的语言和框架。 在这个范例程序中，每个控制器、工厂和过滤器都位于各自的源文件中。</p><p translation-origin="off">The <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility">Rule of 1</a> states that there should be one component per file. This not only makes components easy to navigate and find, but will also allow us to migrate them between languages and frameworks one at a time. In this example application, each controller, component, service, and filter is in its own source file.</p></li><li><p translation-result="on"><a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure">按特性分目录的结构</a>和<a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity">模块化</a>规则在较高的抽象层定义了一些相似的原则：应用程序中的不同部分应该被分到不同的目录和 NgModule 中。</p><p translation-origin="off">The <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure">Folders-by-Feature Structure</a> and <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity">Modularity</a> rules define similar principles on a higher level of abstraction: Different parts of the application should reside in different directories and NgModules.</p></li></ul><p translation-result="on">如果应用程序能用这种方式把每个特性分到一个独立目录中，它也就能每次迁移一个特性。 对于那些还没有这么做的程序，强烈建议把应用这条规则作为准备步骤。而且这也不仅仅对升级有价值， 它还是一个通用的规则，可以让你的程序更“坚实”。</p><p translation-origin="off">When an application is laid out feature per feature in this way, it can also be migrated one feature at a time. For applications that don't already look like this, applying the rules in the AngularJS style guide is a highly recommended preparation step. And this is not just for the sake of the upgrade - it is just solid advice in general!</p><h3 id="using-a-module-loader" translation-result="on">使用模块加载器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-a-module-loader"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="using-a-module-loader">Using a Module Loader<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-a-module-loader"><i class="material-icons">link</i></a></h3><p translation-result="on">当你把应用代码分解到每个文件中只放一个组件的粒度后，通常会得到一个由大量相对较小的文件组成的项目结构。 这比组织成少量大文件要整洁得多，但如果你不得不通过 <code>&lt;script&gt;</code> 标签在 HTML 页面中加载所有这些文件，那就不好玩了。 尤其是当你不得不自己按正确的顺序维护这些标签时更是如此，就要开始使用<em>模块加载器</em>了。</p><p translation-origin="off">When you break application code down into one component per file, you often end up with a project structure with a large number of relatively small files. This is a much neater way to organize things than a small number of large files, but it doesn't work that well if you have to load all those files to the HTML page with &lt;script&gt; tags. Especially when you also have to maintain those tags in the correct order. That's why it's a good idea to start using a <em>module loader</em>.</p><p translation-result="on">使用模块加载器，比如<a href="https://github.com/systemjs/systemjs">SystemJS</a>、 <a href="http://webpack.github.io/">Webpack</a>或<a href="http://browserify.org/">Browserify</a>， 可以让你在程序中使用 TypeScript 或 ES2015 语言内置的模块系统。 你可以使用 <code>import</code> 和 <code>export</code> 特性来明确指定哪些代码应该以及将会被在程序的不同部分之间共享。 对于 ES5 程序来说，可以改用 CommonJS 风格的 <code>require</code> 和 <code>module.exports</code> 特性代替。 无是论哪种情况，模块加载器都会按正确的顺序加载程序中用到的所有代码。</p><p translation-origin="off">Using a module loader such as <a href="https://github.com/systemjs/systemjs">SystemJS</a>, <a href="http://webpack.github.io/">Webpack</a>, or <a href="http://browserify.org/">Browserify</a> allows us to use the built-in module systems of TypeScript or ES2015. You can use the <code>import</code> and <code>export</code> features that explicitly specify what code can and will be shared between different parts of the application. For ES5 applications you can use CommonJS style <code>require</code> and <code>module.exports</code> features. In both cases, the module loader will then take care of loading all the code the application needs in the correct order.</p><p translation-result="on">当要把应用程序投入生产环境时，模块加载器也会让你把所有这些文件打成完整的产品包变得容易一些。</p><p translation-origin="off">When moving applications into production, module loaders also make it easier to package them all up into production bundles with batteries included.</p><h3 id="migrating-to-typescript" translation-result="on">迁移到 TypeScript<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#migrating-to-typescript"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="migrating-to-typescript">Migrating to TypeScript<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#migrating-to-typescript"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 升级计划的一部分是引入 TypeScript，即使在开始升级之前，引入 TypeScript 编译器也是有意义的。 这意味着等真正升级的时候需要学习和思考的东西会更少，并且你可以在 AngularJS 代码中开始使用 TypeScript 的特性。</p><p translation-origin="off">If part of the Angular upgrade plan is to also take TypeScript into use, it makes sense to bring in the TypeScript compiler even before the upgrade itself begins. This means there's one less thing to learn and think about during the actual upgrade. It also means you can start using TypeScript features in your AngularJS code.</p><p translation-result="on">TypeScript 是 ECMAScript 2015 的超集，而 ES2015 又是 ECMAScript 5 的超集。 这意味着除了安装一个 TypeScript 编译器，并把文件名都从 <code>*.js</code> 改成 <code>*.ts</code> 之外，其实什么都不用做。 当然，如果仅仅这样做也没什么大用，也没什么有意思的地方。 下面这些额外的步骤可以让你打起精神：</p><p translation-origin="off">Since TypeScript is a superset of ECMAScript 2015, which in turn is a superset of ECMAScript 5, "switching" to TypeScript doesn't necessarily require anything more than installing the TypeScript compiler and renaming files from <code>*.js</code> to <code>*.ts</code>. But just doing that is not hugely useful or exciting, of course. Additional steps like the following can give us much more bang for the buck:</p><ul><li><p translation-result="on">对那些使用了模块加载器的程序，TypeScript 的导入和导出语法(实际上是 ECMAScript 2015 的导入和导出)可以把代码组织成模块。</p><p translation-origin="off">For applications that use a module loader, TypeScript imports and exports (which are really ECMAScript 2015 imports and exports) can be used to organize code into modules.</p></li><li><p translation-result="on">可以逐步把类型注解添加到现有函数和变量上，以固定它们的类型，并获得其优点：比如编译期错误检查、更好的支持自动完成，以及内联式文档等。</p><p translation-origin="off">Type annotations can be gradually added to existing functions and variables to pin down their types and get benefits like build-time error checking, great autocompletion support and inline documentation.</p></li><li><p translation-result="on">那些 ES2015 中新增的特性，比如箭头函数、<code>let</code>、<code>const</code>、默认函数参数、解构赋值等也可以逐渐添加进来，让代码更有表现力。</p><p translation-origin="off">JavaScript features new to ES2015, like arrow functions, <code>let</code>s and <code>const</code>s, default function parameters, and destructuring assignments can also be gradually added to make the code more expressive.</p></li><li><p translation-result="on">服务和控制器可以转成<em>类</em>。这样它们就能一步步接近 Angular 的服务和组件类了，也会让升级变得简单一点。</p><p translation-origin="off">Services and controllers can be turned into <em>classes</em>. That way they'll be a step closer to becoming Angular service and component classes, which will make life easier after the upgrade.</p></li></ul><h3 id="using-component-directives" translation-result="on">使用组件型指令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-component-directives"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="using-component-directives">Using Component Directives<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-component-directives"><i class="material-icons">link</i></a></h3><p translation-result="on">在 Angular 中，组件是用来构建用户界面的主要元素。你把 UI 中的不同部分定义成组件，然后在模板中使用这些组件合成出最终的 UI。</p><p translation-origin="off">In Angular, components are the main primitive from which user interfaces are built. You define the different portions of the UI as components and compose them into a full user experience.</p><p translation-result="on">你在 AngularJS 中也能这么做。那就是一种定义了自己的模板、控制器和输入/输出绑定的指令 —— 跟 Angular 中对组件的定义是一样的。 要迁移到 Angular，通过组件型指令构建的应用程序会比直接用 <code>ng-controller</code>、<code>ng-include</code> 和作用域继承等底层特性构建的要容易得多。</p><p translation-origin="off">You can also do this in AngularJS, using <em>component directives</em>. These are directives that define their own templates, controllers, and input/output bindings - the same things that Angular components define. Applications built with component directives are much easier to migrate to Angular than applications built with lower-level features like <code>ng-controller</code>, <code>ng-include</code>, and scope inheritance.</p><p translation-result="on">要与 Angular 兼容，AngularJS 的组件型指令应该配置下列属性：</p><p translation-origin="off">To be Angular compatible, an AngularJS component directive should configure these attributes:</p><ul><li><p translation-result="on"> <code>restrict: 'E'</code>。组件通常会以元素的方式使用。</p><p translation-origin="off"><code>restrict: 'E'</code>. Components are usually used as elements.</p></li><li><p translation-result="on"> <code><a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a>: {}</code> - 一个独立作用域。在 Angular 中，组件永远是从它们的环境中被隔离出来的，在 AngularJS 中也同样如此。</p><p translation-origin="off"><code><a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a>: {}</code> - an isolate scope. In Angular, components are always isolated from their surroundings, and you should do this in AngularJS too.</p></li><li><p translation-result="on"> <code>bindToController: {}</code>。组件的输入和输出应该绑定到控制器，而不是 <code>$<a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a></code>。</p><p translation-origin="off"><code>bindToController: {}</code>. Component inputs and outputs should be bound to the controller instead of using the <code>$<a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a></code>.</p></li><li><p translation-result="on"> <code>controller</code> 和 <code>controllerAs</code>。组件要有自己的控制器。</p><p translation-origin="off"><code>controller</code> and <code>controllerAs</code>. Components have their own controllers.</p></li><li><p translation-result="on"> <code>template</code> 或 <code><a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a></code>。组件要有自己的模板。</p><p translation-origin="off"><code>template</code> or <code><a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a></code>. Components have their own templates.</p></li></ul><p translation-result="on">组件型指令还可能使用下列属性：</p><p translation-origin="off">Component directives may also use the following attributes:</p><ul><li><p translation-result="on"> <code>transclude: true</code>：如果组件需要从其它地方透传内容，就设置它。</p><p translation-origin="off"><code>transclude: true/{}</code>, if the component needs to transclude content from elsewhere.</p></li><li><p translation-result="on"> <code>require</code>：如果组件需要和父组件的控制器通讯，就设置它。</p><p translation-origin="off"><code>require</code>, if the component needs to communicate with some parent component's controller.</p></li></ul><p translation-result="on">组件型指令<strong>不能</strong>使用下列属性：</p><p translation-origin="off">Component directives <strong>should not</strong> use the following attributes:</p><ul><li><p translation-result="on"> <code>compile</code>。Angular 不再支持它。</p><p translation-origin="off"><code>compile</code>. This will not be supported in Angular.</p></li><li><p translation-result="on"> <code>replace: true</code>。Angular 永远不会用组件模板替换一个组件元素。这个特性在 AngularJS 中也同样不建议使用了。</p><p translation-origin="off"><code>replace: true</code>. Angular never replaces a component element with the component template. This attribute is also deprecated in AngularJS.</p></li><li><p translation-result="on"> <code>priority</code> 和 <code>terminal</code>。虽然 AngularJS 的组件可能使用这些，但它们在 Angular 中已经没用了，并且最好不要再写依赖它们的代码。</p><p translation-origin="off"><code>priority</code> and <code>terminal</code>. While AngularJS components may use these, they are not used in Angular and it is better not to write code that relies on them.</p></li></ul><p translation-result="on">AngularJS 中一个完全向 Angular 架构对齐过的组件型指令是这样的：</p><p translation-origin="off">An AngularJS component directive that is fully aligned with the Angular architecture may look something like this:</p><code-example path="upgrade-module/src/app/hero-detail.directive.ts" header="hero-detail.directive.ts" ng-version="9.0.0-rc.11"><div style="display:none">export function heroDetailDirective() { return { restrict: 'E', <a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a>: {}, bindToController: { hero: '=', deleted: '&amp;' }, template: ` &lt;h2&gt;{{$ctrl.hero.name}} details!&lt;/h2&gt; &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{$ctrl.hero.id}}&lt;/div&gt; &lt;button ng-click="$ctrl.onDelete()"&gt;Delete&lt;/button&gt; `, controller: function() { this.onDelete = () =&gt; { this.deleted({hero: this.hero}); }; }, controllerAs: '$ctrl' }; }</div><header class="ng-star-inserted">hero-detail.directive.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.directive.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> heroDetailDirective</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">restrict</span><span class="pun">:</span><span class="pln"> </span><span class="str">'E'</span><span class="pun">,</span><span class="pln">
    </span><a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor"><span class="pln">scope</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">{},</span><span class="pln">
    bindToController</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      hero</span><span class="pun">:</span><span class="pln"> </span><span class="str">'='</span><span class="pun">,</span><span class="pln">
      deleted</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&amp;'</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
      &lt;h2&gt;{{$ctrl.hero.name}} details!&lt;/h2&gt;
      &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{$ctrl.hero.id}}&lt;/div&gt;
      &lt;button ng-click="$ctrl.onDelete()"&gt;Delete&lt;/button&gt;
    `</span><span class="pun">,</span><span class="pln">
    controller</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">onDelete </span><span class="pun">=</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">deleted</span><span class="pun">({</span><span class="pln">hero</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">});</span><span class="pln">
      </span><span class="pun">};</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    controllerAs</span><span class="pun">:</span><span class="pln"> </span><span class="str">'$ctrl'</span><span class="pln">
  </span><span class="pun">};</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">AngularJS 1.5 引入了<a href="https://docs.angularjs.org/api/ng/type/angular.Module">组件 API</a>，它让定义指令变得更简单了。 为组件型指令使用这个 API 是一个好主意，因为：</p><p translation-origin="off">AngularJS 1.5 introduces the <a href="https://docs.angularjs.org/api/ng/type/angular.Module#component">component API</a> that makes it easier to define component directives like these. It is a good idea to use this API for component directives for several reasons:</p><ul><li><p translation-result="on">它需要更少的样板代码。</p><p translation-origin="off">It requires less boilerplate code.</p></li><li><p translation-result="on">它强制你遵循组件的最佳实践，比如 <code>controllerAs</code>。</p><p translation-origin="off">It enforces the use of component best practices like <code>controllerAs</code>.</p></li><li><p translation-result="on">指令中像 <code><a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a></code> 和 <code>restrict</code> 这样的属性应该有良好的默认值。</p><p translation-origin="off">It has good default values for directive attributes like <code><a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a></code> and <code>restrict</code>.</p></li></ul><p translation-result="on">如果使用这个组件 API 进行表示，那么上面看到的组件型指令就变成了这样：</p><p translation-origin="off">The component directive example from above looks like this when expressed using the component API:</p><code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" region="hero-detail-io" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">export const heroDetail = { bindings: { hero: '&lt;', deleted: '&amp;' }, template: ` &lt;h2&gt;{{$ctrl.hero.name}} details!&lt;/h2&gt; &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{$ctrl.hero.id}}&lt;/div&gt; &lt;button ng-click="$ctrl.onDelete()"&gt;Delete&lt;/button&gt; `, controller: function() { this.onDelete = () =&gt; { this.deleted(this.hero); }; } };</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> heroDetail </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  bindings</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    hero</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;'</span><span class="pun">,</span><span class="pln">
    deleted</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&amp;'</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;{{$ctrl.hero.name}} details!&lt;/h2&gt;
    &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{$ctrl.hero.id}}&lt;/div&gt;
    &lt;button ng-click="$ctrl.onDelete()"&gt;Delete&lt;/button&gt;
  `</span><span class="pun">,</span><span class="pln">
  controller</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">onDelete </span><span class="pun">=</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">deleted</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">};</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></code>
    </pre></aio-code></code-example><p translation-result="on">控制器的生命周期钩子 <code>$<a href="" class="code-anchor">onInit</a>()</code>、<code>$onDestroy()</code> 和 <code>$<a href="" class="code-anchor">onChanges</a>()</code> 是 AngularJS 1.5 引入的另一些便利特性。 它们都很像<a href="guide/lifecycle-hooks">Angular 中的等价物</a>，所以，围绕它们组织组件生命周期的逻辑在升级到 Angular 时会更容易。</p><p translation-origin="off">Controller lifecycle hook methods <code>$<a href="" class="code-anchor">onInit</a>()</code>, <code>$onDestroy()</code>, and <code>$<a href="" class="code-anchor">onChanges</a>()</code> are another convenient feature that AngularJS 1.5 introduces. They all have nearly exact <a href="guide/lifecycle-hooks">equivalents in Angular</a>, so organizing component lifecycle logic around them will ease the eventual Angular upgrade process.</p><h2 id="upgrading-with-ngupgrade" translation-result="on">使用升级适配器进行升级<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#upgrading-with-ngupgrade"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="upgrading-with-ngupgrade">Upgrading with ngUpgrade<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#upgrading-with-ngupgrade"><i class="material-icons">link</i></a></h2><p translation-result="on">不管要升级什么，Angular 中的 <code>ngUpgrade</code> 库都会是一个非常有用的工具 —— 除非是小到没功能的应用。 借助它，你可以在同一个应用程序中混用并匹配 AngularJS 和 Angular 的组件，并让它们实现无缝的互操作。 这意味着你不用被迫一次性做完所有的升级工作，因为在整个演进过程中，这两个框架可以很自然的和睦相处。</p><p translation-origin="off">The ngUpgrade library in Angular is a very useful tool for upgrading anything but the smallest of applications. With it you can mix and match AngularJS and Angular components in the same application and have them interoperate seamlessly. That means you don't have to do the upgrade work all at once, since there's a natural coexistence between the two frameworks during the transition period.</p><h3 id="how-ngupgrade-works" translation-result="on">升级模块工作原理<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#how-ngupgrade-works"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="how-ngupgrade-works">How ngUpgrade Works<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#how-ngupgrade-works"><i class="material-icons">link</i></a></h3><p translation-result="on"><code>ngUpgrade</code> 提供的主要工具之一被称为 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code>。这是一个服务，它可以启动并管理一个能同时支持 Angular 和 AngularJS 的混合式应用。</p><p translation-origin="off">One of the primary tools provided by ngUpgrade is called the <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code>. This is a module that contains utilities for bootstrapping and managing hybrid applications that support both Angular and AngularJS code.</p><p translation-result="on">当使用 ngUpgrade 时，你实际上在<em>同时运行 AngularJS 和 Angular</em>。所有 Angular 的代码运行在 Angular 框架中，而 AngularJS 的代码运行在 AngularJS 框架中。所有这些都是真实的、全功能的框架版本。 没有进行任何仿真，所以你可以认为同时存在着这两个框架的所有特性和自然行为。</p><p translation-origin="off">When you use ngUpgrade, what you're really doing is <em>running both AngularJS and Angular at the same time</em>. All Angular code is running in the Angular framework, and AngularJS code in the AngularJS framework. Both of these are the actual, fully featured versions of the frameworks. There is no emulation going on, so you can expect to have all the features and natural behavior of both frameworks.</p><p translation-result="on">所有这些事情的背后，本质上是一个框架中管理的组件和服务能和来自另一个框架的进行互操作。 这些主要体现在三个方面：依赖注入、DOM 和变更检测。</p><p translation-origin="off">What happens on top of this is that components and services managed by one framework can interoperate with those from the other framework. This happens in three main areas: Dependency injection, the DOM, and change detection.</p><h4 id="dependency-injection" translation-result="on">依赖注入<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#dependency-injection"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="dependency-injection">Dependency Injection<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#dependency-injection"><i class="material-icons">link</i></a></h4><p translation-result="on">无论是在 AngularJS 中还是在 Angular 中，依赖注入都位于前沿和中心的位置，但在两个框架的工作原理上，却存在着一些关键的不同之处。</p><p translation-origin="off">Dependency injection is front and center in both AngularJS and Angular, but there are some key differences between the two frameworks in how it actually works.</p><table><tbody><tr><th><p>AngularJS</p></th><th><p>Angular</p></th></tr><tr><td><p translation-result="on">依赖注入的令牌(Token)永远是字符串(译注：指服务名称)。</p><p translation-origin="off">Dependency injection tokens are always strings</p></td><td><p translation-result="on">令牌<a href="guide/dependency-injection">可能有不同的类型</a>。 通常是类，也可能是字符串。</p><p translation-origin="off">Tokens <a href="guide/dependency-injection">can have different types</a>. They are often classes. They may also be strings.</p></td></tr><tr><td><p translation-result="on">只有一个注入器。即使在多模块的应用程序中，每样东西也都会被装入一个巨大的命名空间中。</p><p translation-origin="off">There is exactly one injector. Even in multi-module applications, everything is poured into one big namespace.</p></td><td><p translation-result="on">这是一个<a href="guide/hierarchical-dependency-injection">树状多层注入器</a>：有一个根注入器，而且每个组件也有一个自己的注入器。</p><p translation-origin="off">There is a <a href="guide/hierarchical-dependency-injection">tree hierarchy of injectors</a>, with a root injector and an additional injector for each component.</p></td></tr></tbody></table><p translation-result="on">就算有这么多不同点，也并不妨碍你在依赖注入时进行互操作。<code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 解决了这些差异，并让它们无缝的对接：</p><p translation-origin="off">Even accounting for these differences you can still have dependency injection interoperability. <code><a href="api/upgrade/static" class="code-anchor">upgrade/static</a></code> resolves the differences and makes everything work seamlessly:</p><ul><li><p translation-result="on">通过升级它们，你就能让那些在 AngularJS 中能被注入的服务也可用于 Angular 的代码中。 在框架之间共享的是服务的同一个单例对象。在 Angular 中，这些外来服务总是被放在<em>根注入器</em>中，并可用于所有组件。 它们总是具有<em>字符串令牌</em> —— 跟它们在 AngularJS 中的令牌相同。</p><p translation-origin="off">You can make AngularJS services available for injection to Angular code by <em>upgrading</em> them. The same singleton instance of each service is shared between the frameworks. In Angular these services will always be in the <em>root injector</em> and available to all components.</p></li><li><p translation-result="on">通过降级它们，你也能让那些在 Angular 中能被注入的服务在 AngularJS 的代码中可用。 只有那些来自 Angular 根注入器的服务才能被降级。同样的，在框架之间共享的是同一个单例对象。 当你注册一个要降级的服务时，要明确指定一个打算在 AngularJS 中使用的<em>字符串令牌</em>。</p><p translation-origin="off">You can also make Angular services available for injection to AngularJS code by <em>downgrading</em> them. Only services from the Angular root injector can be downgraded. Again, the same singleton instances are shared between the frameworks. When you register a downgraded service, you must explicitly specify a <em>string token</em> that you want to use in AngularJS.</p></li></ul><div class="lightbox"><img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700" height="262"></div><h4 id="components-and-the-dom" translation-result="on">组件与 DOM<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#components-and-the-dom"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="components-and-the-dom">Components and the DOM<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#components-and-the-dom"><i class="material-icons">link</i></a></h4><p translation-result="on">在混合式应用中，同时存在来自 AngularJS 和 Angular 中组件和指令的 DOM。 这些组件通过它们各自框架中的输入和输出绑定来互相通讯，它们由 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 桥接在一起。 它们也能通过共享被注入的依赖彼此通讯，就像前面所说的那样。</p><p translation-origin="off">In the DOM of a hybrid ngUpgrade application are components and directives from both AngularJS and Angular. These components communicate with each other by using the input and output bindings of their respective frameworks, which ngUpgrade bridges together. They may also communicate through shared injected dependencies, as described above.</p><p translation-result="on">理解混合式应用的关键在于，DOM 中的每一个元素都只能属于这两个框架之一，而另一个框架则会忽略它。如果一个元素属于 AngularJS ，那么 Angular 就会当它不存在，反之亦然。</p><p translation-origin="off">The key thing to understand about a hybrid application is that every element in the DOM is owned by exactly one of the two frameworks. The other framework ignores it. If an element is owned by AngularJS, Angular treats it as if it didn't exist, and vice versa.</p><p translation-result="on">所以，混合式应用总是像 AngularJS 程序那样启动，处理根模板的也是 AngularJS. 然后，当这个应用的模板中使用到了 Angular 的组件时，Angular 才开始参与。 这个组件的视图由 Angular 进行管理，而且它还可以使用一系列的 Angular 组件和指令。</p><p translation-origin="off">So normally a hybrid application begins life as an AngularJS application, and it is AngularJS that processes the root template, e.g. the index.html. Angular then steps into the picture when an Angular component is used somewhere in an AngularJS template. That component's template will then be managed by Angular, and it may contain any number of Angular components and directives.</p><p translation-result="on">更进一步说，你可以按照需要，任意穿插使用这两个框架。 使用下面的两种方式之一，你可以在这两个框架之间自由穿梭：</p><p translation-origin="off">Beyond that, you may interleave the two frameworks. You always cross the boundary between the two frameworks by one of two ways:</p><ol><li><p translation-result="on">通过使用来自另一个框架的组件：AngularJS 的模板中用到了 Angular 的组件，或者 Angular 的模板中使用了 AngularJS 的组件。</p><p translation-origin="off">By using a component from the other framework: An AngularJS template using an Angular component, or an Angular template using an AngularJS component.</p></li><li><p translation-result="on">通过透传(transclude)或投影(project)来自另一个框架的内容。<code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 牵线搭桥，把 AngularJS 的透传概念和 Angular 的内容投影概念关联起来。</p><p translation-origin="off">By transcluding or projecting content from the other framework. ngUpgrade bridges the related concepts of AngularJS transclusion and Angular content projection together.</p></li></ol><div class="lightbox"><img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500" height="294"></div><p translation-result="on">当你使用一个属于另一个框架的组件时，就会发生一次跨框架边界的切换。不过，这种切换只发生在该组件元素的<em>子节点</em>上。 考虑一个场景，你从 AngularJS 中使用一个 Angular 组件，就像这样：</p><p translation-origin="off">Whenever you use a component that belongs to the other framework, a switch between framework boundaries occurs. However, that switch only happens to the elements in the template of that component. Consider a situation where you use an Angular component from AngularJS like this:</p><code-example language="html" escape="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;a-component&gt;&lt;/a-component&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;a-component&gt;&lt;/a-component&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">此时，<code>&lt;a-component&gt;</code> 这个 DOM 元素仍然由 AngularJS 管理，因为它是在 AngularJS 的模板中定义的。 这也意味着你可以往它上面添加别的 AngularJS 指令，却<em>不能</em>添加 Angular 的指令。 只有在 <code>&lt;a-component&gt;</code> 组件的模板中才是 Angular 的天下。同样的规则也适用于在 Angular 中使用 AngularJS 组件型指令的情况。</p><p translation-origin="off">The DOM element <code>&lt;a-component&gt;</code> will remain to be an AngularJS managed element, because it's defined in an AngularJS template. That also means you can apply additional AngularJS directives to it, but <em>not</em> Angular directives. It is only in the template of the <code>&lt;a-component&gt;</code> where Angular steps in. This same rule also applies when you use AngularJS component directives from Angular.</p><h4 id="change-detection" translation-result="on">变更检测<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#change-detection"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="change-detection">Change Detection<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#change-detection"><i class="material-icons">link</i></a></h4><p translation-result="on">AngularJS 中的变更检测全是关于 <code>scope.$apply()</code> 的。在每个事件发生之后，<code>scope.$apply()</code> 就会被调用。 这或者由框架自动调用，或者在某些情况下由你自己的代码手动调用。</p><p translation-origin="off">The <code>scope.$apply()</code> is how AngularJS detects changes and updates data bindings. After every event that occurs, <code>scope.$apply()</code> gets called. This is done either automatically by the framework, or manually by you.</p><p translation-result="on">在 Angular 中，事情有点不一样。虽然变更检测仍然会在每一个事件之后发生，却不再需要每次调用 <code>scope.$apply()</code> 了。 这是因为所有 Angular 代码都运行在一个叫做<a href="api/core/NgZone">Angular zone</a>的地方。 Angular 总是知道什么时候代码执行完了，也就知道了它什么时候应该触发变更检测。代码本身并不需要调用 <code>scope.$apply()</code> 或其它类似的东西。</p><p translation-origin="off">In Angular things are different. While change detection still occurs after every event, no one needs to call <code>scope.$apply()</code> for that to happen. This is because all Angular code runs inside something called the <a href="api/core/NgZone">Angular zone</a>. Angular always knows when the code finishes, so it also knows when it should kick off change detection. The code itself doesn't have to call <code>scope.$apply()</code> or anything like it.</p><p translation-result="on">在这种混合式应用的案例中，<code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 在 AngularJS 的方法和 Angular 的方法之间建立了桥梁。发生了什么呢？</p><p translation-origin="off">In the case of hybrid applications, the <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> bridges the AngularJS and Angular approaches. Here's what happens:</p><ul><li><p translation-result="on">应用中发生的每件事都运行在 Angular 的 zone 里。 无论事件发生在 AngularJS 还是 Angular 的代码中，都是如此。 这个 zone 会在每个事件之后触发 Angular 的变更检测。</p><p translation-origin="off">Everything that happens in the application runs inside the Angular zone. This is true whether the event originated in AngularJS or Angular code. The zone triggers Angular change detection after every event.</p></li><li><p translation-result="on"> <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 将在每一次离开 Angular zone 时调用 AngularJS 的 <code>$rootScope.$apply()</code>。这样也就同样会在每个事件之后触发 AngularJS 的变更检测。</p><p translation-origin="off">The <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> will invoke the AngularJS <code>$rootScope.$apply()</code> after every turn of the Angular zone. This also triggers AngularJS change detection after every event.</p></li></ul><div class="lightbox"><img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600" height="163"></div><p translation-result="on">在实践中，你不用在自己的代码中调用 <code>$apply()</code>，而不用管这段代码是在 AngularJS 还是 Angular 中。 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 都替你做了。你仍然<em>可以</em>调用 <code>$apply()</code>，也就是说你不必从现有代码中移除此调用。 在混合式应用中，这些调用只会触发一次额外的 AngularJS 变更检测。</p><p translation-origin="off">In practice, you do not need to call <code>$apply()</code>, regardless of whether it is in AngularJS or Angular. The <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> does it for us. You <em>can</em> still call <code>$apply()</code> so there is no need to remove such calls from existing code. Those calls just trigger additional AngularJS change detection checks in a hybrid application.</p><p translation-result="on">当你降级一个 Angular 组件，然后把它用于 AngularJS 中时，组件的输入属性就会被 AngularJS 的变更检测体系监视起来。 当那些输入属性发生变化时，组件中相应的属性就会被设置。你也能通过实现<a href="api/core/OnChanges">OnChanges</a> 接口来挂钩到这些更改，就像它未被降级时一样。</p><p translation-origin="off">When you downgrade an Angular component and then use it from AngularJS, the component's inputs will be watched using AngularJS change detection. When those inputs change, the corresponding properties in the component are set. You can also hook into the changes by implementing the <a href="api/core/OnChanges">OnChanges</a> interface in the component, just like you could if it hadn't been downgraded.</p><p translation-result="on">相应的，当你把 AngularJS 的组件升级给 Angular 使用时，在这个组件型指令的 <code><a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a></code>(或 <code>bindToController</code>)中定义的所有绑定， 都将被挂钩到 Angular 的变更检测体系中。它们将和标准的 Angular 输入属性被同等对待，并当它们发生变化时设置回 scope(或控制器)上。</p><p translation-origin="off">Correspondingly, when you upgrade an AngularJS component and use it from Angular, all the bindings defined for the component directive's <code><a href="api/service-worker/SwRegistrationOptions#scope" class="code-anchor">scope</a></code> (or <code>bindToController</code>) will be hooked into Angular change detection. They will be treated as regular Angular inputs. Their values will be written to the upgraded component's scope (or controller) when they change.</p><h3 id="using-upgrademodule-with-angular-ngmodules" translation-result="on">通过 Angular 的 <em>NgModule</em> 来使用 UpgradeModule<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-upgrademodule-with-angular-ngmodules"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="using-upgrademodule-with-angular-ngmodules">Using UpgradeModule with Angular <em>NgModules</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-upgrademodule-with-angular-ngmodules"><i class="material-icons">link</i></a></h3><p translation-result="on">AngularJS 还是 Angular 都有自己的模块概念，来帮你把应用组织成一些内聚的功能块。</p><p translation-origin="off">Both AngularJS and Angular have their own concept of modules to help organize an application into cohesive blocks of functionality.</p><p translation-result="on">它们在架构和实现的细节上有着显著的不同。 在 AngularJS 中，你要把 AngularJS 的资源添加到 <code>angular.module</code> 属性上。 在 Angular 中，你要创建一个或多个带有 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 装饰器的类，这些装饰器用来在元数据中描述 Angular 资源。差异主要来自这里。</p><p translation-origin="off">Their details are quite different in architecture and implementation. In AngularJS, you add Angular assets to the <code>angular.module</code> property. In Angular, you create one or more classes adorned with an <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> decorator that describes Angular assets in metadata. The differences blossom from there.</p><p translation-result="on">在混合式应用中，你同时运行了两个版本的 Angular。 这意味着你至少需要 AngularJS 和 Angular 各提供一个模块。 当你使用 AngularJS 的模块进行引导时，就得把 Angular 的模块传给 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code>。</p><p translation-origin="off">In a hybrid application you run both versions of Angular at the same time. That means that you need at least one module each from both AngularJS and Angular. You will import <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> inside the NgModule, and then use it for bootstrapping the AngularJS module.</p><div class="alert is-helpful"><p translation-result="on">要了解更多，请参阅<a href="guide/ngmodules">NgModules</a>页。</p><p translation-origin="off">For more information, see <a href="guide/ngmodules">NgModules</a>.</p></div><h3 id="bootstrapping-hybrid-applications" translation-result="on">引导混合式应用程序<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#bootstrapping-hybrid-applications"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bootstrapping-hybrid-applications">Bootstrapping hybrid applications<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#bootstrapping-hybrid-applications"><i class="material-icons">link</i></a></h3><p translation-result="on">要想引导混合式应用，就必须在应用中分别引导 Angular 和 AngularJS 应用的一部分。你必须先引导 Angular ，然后再调用 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 来引导 AngularJS。</p><p translation-origin="off">To bootstrap a hybrid application, you must bootstrap each of the Angular and AngularJS parts of the application. You must bootstrap the Angular bits first and then ask the <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> to bootstrap the AngularJS bits next.</p><p translation-result="on">在 AngularJS 应用中有一个 AngularJS 的根模块，它用于引导 AngularJS 应用。</p><p translation-origin="off">In an AngularJS application you have a root AngularJS module, which will also be used to bootstrap the AngularJS application.</p><code-example path="upgrade-module/src/app/ajs-bootstrap/app.module.ts" region="ng1module" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">angular.module('heroApp', []) .controller('MainCtrl', function() { this.message = 'Hello world'; });</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'heroApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[])</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">controller</span><span class="pun">(</span><span class="str">'MainCtrl'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">message </span><span class="pun">=</span><span class="pln"> </span><span class="str">'Hello world'</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">单纯的 AngularJS 应用可以在 HTML 页面中使用 <code>ng-app</code> 指令进行引导，但对于混合式应用你要通过 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 模块进行手动引导。因此，在切换成混合式应用之前，最好先把 AngularJS 改写成使用 <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap"><code>angular.bootstrap</code></a>进行手动引导的方式。</p><p translation-origin="off">Pure AngularJS applications can be automatically bootstrapped by using an <code>ng-app</code> directive somewhere on the HTML page. But for hybrid applications, you manually bootstrap via the <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code>. Therefore, it is a good preliminary step to switch AngularJS applications to use the manual JavaScript <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap"><code>angular.bootstrap</code></a>method even before switching them to hybrid mode.</p><p translation-result="on">比如你现在有这样一个通过 <code>ng-app</code> 进行引导的应用：</p><p translation-origin="off">Say you have an <code>ng-app</code> driven bootstrap such as this one:</p><code-example path="upgrade-module/src/index-ng-app.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!DOCTYPE <a href="api/core/SecurityContext#HTML" class="code-anchor">HTML</a>&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;base href="/"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"&gt;&lt;/script&gt; &lt;script src="app/ajs-ng-app/app.module.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body ng-app="heroApp" ng-strict-di&gt; &lt;div id="<a href="api/common/http/HttpErrorResponse#message" class="code-anchor">message</a>" ng-controller="MainCtrl as mainCtrl"&gt; {{ mainCtrl.message }} &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="dec">&lt;!DOCTYPE </span><a href="api/core/SecurityContext#HTML" class="code-anchor"><span class="dec">HTML</span></a><span class="dec">&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;base</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"app/ajs-ng-app/app.module.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;/head&gt;</span><span class="pln">

  </span><span class="tag">&lt;body</span><span class="pln"> </span><span class="atn">ng-app</span><span class="pun">=</span><span class="atv">"heroApp"</span><span class="pln"> </span><span class="atn">ng-strict-di</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"</span><a href="api/common/http/HttpErrorResponse#message" class="code-anchor"><span class="atv">message</span></a><span class="atv">"</span><span class="pln"> </span><span class="atn">ng-controller</span><span class="pun">=</span><span class="atv">"MainCtrl as mainCtrl"</span><span class="tag">&gt;</span><span class="pln">
      {{ mainCtrl.message }}
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">你可以从 HTML 中移除 <code>ng-app</code> 和 <code>ng-strict-di</code> 指令，改为从 JavaScript 中调用 <code>angular.bootstrap</code>，它能达到同样效果：</p><p translation-origin="off">You can remove the <code>ng-app</code> and <code>ng-strict-di</code> directives from the HTML and instead switch to calling <code>angular.bootstrap</code> from JavaScript, which will result in the same thing:</p><code-example path="upgrade-module/src/app/ajs-bootstrap/app.module.ts" region="bootstrap" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">angular.bootstrap(document.body, ['heroApp'], { strictDi: true });</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">angular</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'heroApp'</span><span class="pun">],</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> strictDi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">要想把 AngularJS 应用变成 Hybrid 应用，就要先加载 Angular 框架。 根据<a href="guide/upgrade-setup">准备升级到 AngularJS</a> 中给出的步骤，选择性的把<a href="https://github.com/angular/quickstart" target="_blank">“快速上手”的 Github 仓库</a>中的代码复制过来。</p><p translation-origin="off">To begin converting your AngularJS application to a hybrid, you need to load the Angular framework. You can see how this can be done with SystemJS by following the instructions in <a href="guide/upgrade-setup">Setup for Upgrading to AngularJS</a> for selectively copying code from the <a href="https://github.com/angular/quickstart">QuickStart github repository</a>.</p><p translation-result="on">也可以通过 <code>npm install @angular/upgrade --save</code> 命令来安装 <code>@angular/upgrade</code> 包，并给它添加一个到 <code>@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a></code> 包的映射。</p><p translation-origin="off">You also need to install the <code>@angular/upgrade</code> package via <code>npm install @angular/upgrade --save</code> and add a mapping for the <code>@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a></code> package:</p><code-example path="upgrade-module/src/systemjs.config.1.js" region="upgrade-static-umd" header="systemjs.config.js (map)" ng-version="9.0.0-rc.11"><div style="display:none">'@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',</div><header class="ng-star-inserted">systemjs.config.js (map)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from systemjs.config.js (map)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/upgrade/bundles/upgrade-static.umd.js'</span><span class="pun">,</span></code>
    </pre></aio-code></code-example><p translation-result="on">接下来，创建一个 <code>app.module.ts</code> 文件，并添加下列 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 类：</p><p translation-origin="off">Next, create an <code>app.module.ts</code> file and add the following <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> class:</p><code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="ngmodule" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a> ] }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'heroApp'</span><span class="pun">],</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> strictDi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">最小化的 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 导入了 <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code>，它是每个基于浏览器的 Angular 应用必备的。 它还从 <code>@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a></code> 中导入了 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code>，它导出了一些服务提供商，这些提供商会用于升级、降级服务和组件。</p><p translation-origin="off">This bare minimum <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> imports <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code>, the module every Angular browser-based app must have. It also imports <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> from <code>@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a></code>, which exports providers that will be used for upgrading and downgrading services and components.</p><p translation-result="on">在 <code>AppModule</code> 的构造函数中，使用依赖注入技术获取了一个 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 实例，并用它在 <code>AppModule.ngDoBootstrap</code> 方法中启动 AngularJS 应用。 <code>upgrade.bootstrap</code> 方法接受和 <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap">angular.bootstrap</a> 完全相同的参数。</p><p translation-origin="off">In the constructor of the <code>AppModule</code>, use dependency injection to get a hold of the <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> instance, and use it to bootstrap the AngularJS app in the <code>AppModule.ngDoBootstrap</code> method. The <code>upgrade.bootstrap</code> method takes the exact same arguments as <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap">angular.bootstrap</a>:</p><div class="alert is-helpful"><p translation-result="on">注意，你不需要在 <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 中加入 <code>bootstrap</code> 声明，因为 AngularJS 控制着该应用的根模板。</p><p translation-origin="off">Note that you do not add a <code>bootstrap</code> declaration to the <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> decorator, since AngularJS will own the root template of the application.</p></div><p translation-result="on">现在，你就可以使用 <code>platformBrowserDynamic.bootstrapModule</code> 方法来启动 <code>AppModule</code> 了。</p><p translation-origin="off">Now you can bootstrap <code>AppModule</code> using the <code>platformBrowserDynamic.bootstrapModule</code> method.</p><code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="bootstrap" header="app.module.ts'" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic'; <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a>().bootstrapModule(AppModule);</div><header class="ng-star-inserted">app.module.ts'</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts'">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser-dynamic'</span><span class="pun">;</span><span class="pln">

</span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pun">().</span><span class="pln">bootstrapModule</span><span class="pun">(</span><span class="typ">AppModule</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">恭喜！你就要开始运行这个混合式应用了！所有现存的 AngularJS 代码会像以前一样正常工作，但是你现在也同样可以运行 Angular 代码了。</p><p translation-origin="off">Congratulations! You're running a hybrid application! The existing AngularJS code works as before <em>and</em> you're ready to start adding Angular code.</p><h3 id="using-angular-components-from-angularjs-code" translation-result="on">在 AngularJS 的代码中使用 Angular 的组件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-angular-components-from-angularjs-code"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="using-angular-components-from-angularjs-code">Using Angular Components from AngularJS Code<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-angular-components-from-angularjs-code"><i class="material-icons">link</i></a></h3><img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" class="left" width="250" height="44"><p translation-result="on">一旦你开始运行混合式应用，你就可以开始逐渐升级代码了。一种更常见的工作模式就是在 AngularJS 的上下文中使用 Angular 的组件。 该组件可能是全新的，也可能是把原本 AngularJS 的组件用 Angular 重写而成的。</p><p translation-origin="off">Once you're running a hybrid app, you can start the gradual process of upgrading code. One of the more common patterns for doing that is to use an Angular component in an AngularJS context. This could be a completely new component or one that was previously AngularJS but has been rewritten for Angular.</p><p translation-result="on">假设你有一个简单的用来显示英雄信息的 Angular 组件：</p><p translation-origin="off">Say you have a simple Angular component that shows information about a hero:</p><code-example path="upgrade-module/src/app/downgrade-static/hero-detail.component.ts" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'hero-detail', template: ` &lt;h2&gt;Windstorm details!&lt;/h2&gt; &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;1&lt;/div&gt; ` }) export class HeroDetailComponent { }</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hero-detail'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;Windstorm details!&lt;/h2&gt;
    &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;1&lt;/div&gt;
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HeroDetailComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果你想在 AngularJS 中使用这个组件，就得用 <code><a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>()</code> 方法把它<em>降级</em>。 其结果是一个 AngularJS 的<em>指令</em>，你可以把它注册到 AngularJS 的模块中：</p><p translation-origin="off">If you want to use this component from AngularJS, you need to <em>downgrade</em> it using the <code><a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>()</code> method. The result is an AngularJS <em>directive</em>, which you can then register in the AngularJS module:</p><code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="downgradecomponent" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { HeroDetailComponent } from './hero-detail.component'; /* . . . */ import { <a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; angular.module('heroApp', []) .directive( 'heroDetail', <a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>({ component: HeroDetailComponent }) as angular.IDirectiveFactory );</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">HeroDetailComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./hero-detail.component'</span><span class="pun">;</span><span class="pln">

</span><span class="com">/* . . . */</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/downgradeComponent" class="code-anchor"><span class="pln">downgradeComponent</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'heroApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[])</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">directive</span><span class="pun">(</span><span class="pln">
    </span><span class="str">'heroDetail'</span><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/downgradeComponent" class="code-anchor"><span class="pln">downgradeComponent</span></a><span class="pun">({</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">HeroDetailComponent</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="kwd">as</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IDirectiveFactory</span><span class="pln">
  </span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">由于 <code>HeroDetailComponent</code> 是一个 Angular 组件，所以你必须同时把它加入 <code>AppModule</code> 的 <code>declarations</code> 字段中。</p><p translation-origin="off">Because <code>HeroDetailComponent</code> is an Angular component, you must also add it to the <code>declarations</code> in the <code>AppModule</code>.</p><p translation-result="on">并且由于这个组件在 AngularJS 模块中使用，也是你 Angular 应用的一个入口点，你还需要 将它加入到 NgModule 的 <code>entryComponents</code> 列表中。</p><p translation-origin="off">And because this component is being used from the AngularJS module, and is an entry point into the Angular application, you must add it to the <code>entryComponents</code> for the NgModule.</p><code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="ngmodule" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { HeroDetailComponent } from './hero-detail.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a> ], declarations: [ HeroDetailComponent ], entryComponents: [ HeroDetailComponent ] }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">HeroDetailComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./hero-detail.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">HeroDetailComponent</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  entryComponents</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">HeroDetailComponent</span><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'heroApp'</span><span class="pun">],</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> strictDi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">所有 Angular 组件、指令和管道都必须声明在 NgModule 中。</p><p translation-origin="off">All Angular components, directives and pipes must be declared in an NgModule.</p></div><p translation-result="on">最终的结果是一个叫做 <code>heroDetail</code> 的 AngularJS 指令，你可以像用其它指令一样把它用在 AngularJS 模板中。</p><p translation-origin="off">The net result is an AngularJS directive called <code>heroDetail</code>, that you can use like any other directive in AngularJS templates.</p><code-example path="upgrade-module/src/index-downgrade-static.html" region="usecomponent" ng-version="9.0.0-rc.11"><div style="display:none">&lt;hero-detail&gt;&lt;/hero-detail&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;hero-detail&gt;&lt;/hero-detail&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">注意，它在 AngularJS 中是一个名叫 <code>heroDetail</code> 的元素型指令（<code>restrict: 'E'</code>）。 AngularJS 的元素型指令是基于它的<em>名字</em>匹配的。 <em>Angular 组件中的 <code>selector</code> 元数据，在降级后的版本中会被忽略。</em></p><p translation-origin="off">Note that this AngularJS is an element directive (<code>restrict: 'E'</code>) called <code>heroDetail</code>. An AngularJS element directive is matched based on its <em>name</em>. <em>The <code>selector</code> metadata of the downgraded Angular component is ignored.</em></p></div><p translation-result="on">当然，大多数组件都不像这个这么简单。它们中很多都有<em>输入属性和输出属性</em>，来把它们连接到外部世界。 Angular 的英雄详情组件带有像这样的输入属性与输出属性：</p><p translation-origin="off">Most components are not quite this simple, of course. Many of them have <em>inputs and outputs</em> that connect them to the outside world. An Angular hero detail component with inputs and outputs might look like this:</p><code-example path="upgrade-module/src/app/downgrade-io/hero-detail.component.ts" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>, <a href="api/core/Input" class="code-anchor">Input</a>, <a href="api/core/Output" class="code-anchor">Output</a> } from '@angular/core'; import { Hero }&nbsp;from '../hero'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'hero-detail', template: ` &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt; &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{hero.id}}&lt;/div&gt; &lt;button (click)="onDelete()"&gt;Delete&lt;/button&gt; ` }) export class HeroDetailComponent { @<a href="api/core/Input" class="code-anchor">Input</a>() hero: Hero; @<a href="api/core/Output" class="code-anchor">Output</a>() deleted = new <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;Hero&gt;(); onDelete() { this.deleted.emit(this.hero); } }</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Input" class="code-anchor"><span class="typ">Input</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Output" class="code-anchor"><span class="typ">Output</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Hero</span><span class="pln"> </span><span class="pun">}</span><span class="pln">&nbsp;</span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../hero'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hero-detail'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
    &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{hero.id}}&lt;/div&gt;
    &lt;button (click)="onDelete()"&gt;Delete&lt;/button&gt;
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HeroDetailComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> hero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">;</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Output" class="code-anchor"><span class="lit">Output</span></a><span class="pun">()</span><span class="pln"> deleted </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="pun">&lt;</span><span class="typ">Hero</span><span class="pun">&gt;();</span><span class="pln">
  onDelete</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">deleted</span><span class="pun">.</span><span class="pln">emit</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">这些输入属性和输出属性的值来自于 AngularJS 的模板，而 <code><a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>()</code> 方法负责桥接它们：</p><p translation-origin="off">These inputs and outputs can be supplied from the AngularJS template, and the <code><a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>()</code> method takes care of wiring them up:</p><code-example path="upgrade-module/src/index-downgrade-io.html" region="usecomponent" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div ng-controller="MainController as mainCtrl"&gt; &lt;hero-detail [hero]="mainCtrl.hero" (deleted)="mainCtrl.onDelete($event)"&gt; &lt;/hero-detail&gt; &lt;/div&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-controller</span><span class="pun">=</span><span class="atv">"MainController as mainCtrl"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;hero-detail</span><span class="pln"> [</span><span class="atn">hero</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"mainCtrl.hero"</span><span class="pln">
               (</span><span class="atn">deleted</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"mainCtrl.onDelete($event)"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/hero-detail&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">注意，虽然你正在 AngularJS 的模板中，<strong>但却在使用 Angular 的属性(Attribute)语法来绑定到输入属性与输出属性</strong>。 这是降级的组件本身要求的。而表达式本身仍然是标准的 AngularJS 表达式。</p><p translation-origin="off">Note that even though you are in an AngularJS template, <strong>you're using Angular attribute syntax to bind the inputs and outputs</strong>. This is a requirement for downgraded components. The expressions themselves are still regular AngularJS expressions.</p><div class="callout is-important"><header translation-result="on">在降级过的组件属性中使用中线命名法</header><header translation-origin="off">Use kebab-case for downgraded component attributes</header><p translation-result="on">为降级过的组件使用 Angular 的属性(Attribute)语法规则时有一个值得注意的例外。 它适用于由多个单词组成的输入或输出属性。在 Angular 中，你要使用小驼峰命名法绑定这些属性：</p><p translation-origin="off">There's one notable exception to the rule of using Angular attribute syntax for downgraded components. It has to do with input or output names that consist of multiple words. In Angular, you would bind these attributes using camelCase:</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">[myHero]="hero"</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">[</span><span class="pln">myHero</span><span class="pun">]=</span><span class="str">"hero"</span></code>
    </pre></aio-code></code-example><p translation-result="on">但是从 AngularJS 的模板中使用它们时，你得使用中线命名法：</p><p translation-origin="off">But when using them from AngularJS templates, you must use kebab-case:</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">[my-hero]="hero"</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">[</span><span class="kwd">my</span><span class="pun">-</span><span class="pln">hero</span><span class="pun">]=</span><span class="str">"hero"</span></code>
    </pre></aio-code></code-example></div><p translation-result="on"><code>$event</code> 变量能被用在输出属性里，以访问这个事件所发出的对象。这个案例中它是 <code>Hero</code> 对象，因为 <code>this.deleted.emit()</code> 函数曾把它传了出来。</p><p translation-origin="off">The <code>$event</code> variable can be used in outputs to gain access to the object that was emitted. In this case it will be the <code>Hero</code> object, because that is what was passed to <code>this.deleted.emit()</code>.</p><p translation-result="on">由于这是一个 AngularJS 模板，虽然它已经有了 Angular 中绑定的属性(Attribute)，你仍可以在这个元素上使用其它 AngularJS 指令。 例如，你可以用 <code>ng-repeat</code> 简单的制作该组件的多份拷贝：</p><p translation-origin="off">Since this is an AngularJS template, you can still use other AngularJS directives on the element, even though it has Angular binding attributes on it. For example, you can easily make multiple copies of the component using <code>ng-repeat</code>:</p><code-example path="upgrade-module/src/index-downgrade-io.html" region="userepeatedcomponent" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div ng-controller="MainController as mainCtrl"&gt; &lt;hero-detail [hero]="hero" (deleted)="mainCtrl.onDelete($event)" ng-repeat="hero in mainCtrl.heroes"&gt; &lt;/hero-detail&gt; &lt;/div&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-controller</span><span class="pun">=</span><span class="atv">"MainController as mainCtrl"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;hero-detail</span><span class="pln"> [</span><span class="atn">hero</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"hero"</span><span class="pln">
               (</span><span class="atn">deleted</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"mainCtrl.onDelete($event)"</span><span class="pln">
               </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"hero in mainCtrl.heroes"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/hero-detail&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><h3 id="using-angularjs-component-directives-from-angular-code" translation-result="on">从 Angular 代码中使用 AngularJS 组件型指令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-angularjs-component-directives-from-angular-code"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="using-angularjs-component-directives-from-angular-code">Using AngularJS Component Directives from Angular Code<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-angularjs-component-directives-from-angular-code"><i class="material-icons">link</i></a></h3><img src="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" class="left" width="250" height="44"><p translation-result="on">现在，你已经能在 Angular 中写一个组件，并把它用于 AngularJS 代码中了。 当你从低级组件开始移植，并往上走时，这非常有用。但在另外一些情况下，从相反的方向进行移植会更加方便： 从高级组件开始，然后往下走。这也同样能用 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 完成。 你可以<em>升级</em>AngularJS 组件型指令，然后从 Angular 中用它们。</p><p translation-origin="off">So, you can write an Angular component and then use it from AngularJS code. This is useful when you start to migrate from lower-level components and work your way up. But in some cases it is more convenient to do things in the opposite order: To start with higher-level components and work your way down. This too can be done using the <code><a href="api/upgrade/static" class="code-anchor">upgrade/static</a></code>. You can <em>upgrade</em> AngularJS component directives and then use them from Angular.</p><p translation-result="on">不是所有种类的 AngularJS 指令都能升级。该指令必须是一个严格的<em>组件型指令</em>，具有<a href="guide/upgrade#using-component-directives">上面的准备指南中描述的</a>那些特征。 确保兼容性的最安全的方式是 AngularJS 1.5 中引入的<a href="https://docs.angularjs.org/api/ng/type/angular.Module">组件 API</a>。</p><p translation-origin="off">Not all kinds of AngularJS directives can be upgraded. The directive really has to be a <em>component directive</em>, with the characteristics <a href="guide/upgrade#using-component-directives">described in the preparation guide above</a>. The safest bet for ensuring compatibility is using the <a href="https://docs.angularjs.org/api/ng/type/angular.Module">component API</a> introduced in AngularJS 1.5.</p><p translation-result="on">可升级组件的简单例子是只有一个模板和一个控制器的指令：</p><p translation-origin="off">A simple example of an upgradable component is one that just has a template and a controller:</p><code-example path="upgrade-module/src/app/upgrade-static/hero-detail.component.ts" region="hero-detail" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">export const heroDetail = { template: ` &lt;h2&gt;Windstorm details!&lt;/h2&gt; &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;1&lt;/div&gt; `, controller: function() { } };</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> heroDetail </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;Windstorm details!&lt;/h2&gt;
    &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;1&lt;/div&gt;
  `</span><span class="pun">,</span><span class="pln">
  controller</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></code>
    </pre></aio-code></code-example><p translation-result="on">你可以使用 <code><a href="api/upgrade/static/UpgradeComponent" class="code-anchor">UpgradeComponent</a></code> 方法来把这个组件<em>升级</em>到 Angular。 具体方法是创建一个 Angular<strong>指令</strong>，继承 <code><a href="api/upgrade/static/UpgradeComponent" class="code-anchor">UpgradeComponent</a></code>，在其构造函数中进行 <code>super</code> 调用， 这样你就得到一个完全升级的 AngularJS 组件，并且可以 Angular 中使用。 剩下是工作就是把它加入到 <code>AppModule</code> 的 <code>declarations</code> 数组。</p><p translation-origin="off">You can <em>upgrade</em> this component to Angular using the <code><a href="api/upgrade/static/UpgradeComponent" class="code-anchor">UpgradeComponent</a></code> class. By creating a new Angular <strong>directive</strong> that extends <code><a href="api/upgrade/static/UpgradeComponent" class="code-anchor">UpgradeComponent</a></code> and doing a <code>super</code> call inside its constructor, you have a fully upgraded AngularJS component to be used inside Angular. All that is left is to add it to <code>AppModule</code>'s <code>declarations</code> array.</p><code-example path="upgrade-module/src/app/upgrade-static/hero-detail.component.ts" region="hero-detail-upgrade" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Directive" class="code-anchor">Directive</a>, <a href="api/core/ElementRef" class="code-anchor">ElementRef</a>, <a href="api/core/Injector" class="code-anchor">Injector</a>, <a href="api/core/SimpleChanges" class="code-anchor">SimpleChanges</a> } from '@angular/core'; import { <a href="api/upgrade/static/UpgradeComponent" class="code-anchor">UpgradeComponent</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; @<a href="api/core/Directive" class="code-anchor">Directive</a>({ selector: 'hero-detail' }) export class HeroDetailDirective extends <a href="api/upgrade/static/UpgradeComponent" class="code-anchor">UpgradeComponent</a> { constructor(elementRef: <a href="api/core/ElementRef" class="code-anchor">ElementRef</a>, injector: <a href="api/core/Injector" class="code-anchor">Injector</a>) { super('heroDetail', elementRef, injector); } }</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Directive" class="code-anchor"><span class="typ">Directive</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ElementRef" class="code-anchor"><span class="typ">ElementRef</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Injector" class="code-anchor"><span class="typ">Injector</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/SimpleChanges" class="code-anchor"><span class="typ">SimpleChanges</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeComponent" class="code-anchor"><span class="typ">UpgradeComponent</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hero-detail'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HeroDetailDirective</span><span class="pln"> </span><span class="kwd">extends</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeComponent" class="code-anchor"><span class="typ">UpgradeComponent</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">elementRef</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/ElementRef" class="code-anchor"><span class="typ">ElementRef</span></a><span class="pun">,</span><span class="pln"> injector</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/Injector" class="code-anchor"><span class="typ">Injector</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">super</span><span class="pun">(</span><span class="str">'heroDetail'</span><span class="pun">,</span><span class="pln"> elementRef</span><span class="pun">,</span><span class="pln"> injector</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><code-example path="upgrade-module/src/app/upgrade-static/app.module.ts" region="hero-detail-upgrade" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a> ], declarations: [ HeroDetailDirective, /* . . . */ ] }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">HeroDetailDirective</span><span class="pun">,</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'heroApp'</span><span class="pun">],</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> strictDi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">升级后的组件是 Angular 的<strong>指令</strong>，而不是<strong>组件</strong>，因为 Angular 不知道 AngularJS 将在它下面创建元素。 Angular 所知道的是升级后的组件只是一个指令（一个标签），Angular 不需要关心组件本身及其子元素。</p><p translation-origin="off">Upgraded components are Angular <strong>directives</strong>, instead of <strong>components</strong>, because Angular is unaware that AngularJS will create elements under it. As far as Angular knows, the upgraded component is just a directive - a tag - and Angular doesn't have to concern itself with its children.</p></div><p translation-result="on">升级后的组件也可能有输入属性和输出属性，它们是在原 AngularJS 组件型指令的 scope/controller 绑定中定义的。 当你从 Angular 模板中使用该组件时，就要使用<strong>Angular 模板语法</strong>来提供这些输入属性和输出属性，但要遵循下列规则：</p><p translation-origin="off">An upgraded component may also have inputs and outputs, as defined by the scope/controller bindings of the original AngularJS component directive. When you use the component from an Angular template, provide the inputs and outputs using <strong>Angular template syntax</strong>, observing the following rules:</p><table><tbody><tr><th></th><th><p translation-result="on">绑定定义</p><p translation-origin="off">Binding definition</p></th><th><p translation-result="on">模板语法</p><p translation-origin="off">Template syntax</p></th></tr><tr><th><p translation-result="on">属性(Attribute)绑定</p><p translation-origin="off">Attribute binding</p></th><td><p> <code>myAttribute: '@myAttribute'</code></p></td><td><p> <code>&lt;my-component myAttribute="value"&gt;</code></p></td></tr><tr><th><p translation-result="on">表达式绑定</p><p translation-origin="off">Expression binding</p></th><td><p> <code>myOutput: '&amp;myOutput'</code></p></td><td><p> <code>&lt;my-component (myOutput)="action()"&gt;</code></p></td></tr><tr><th><p translation-result="on">单向绑定</p><p translation-origin="off">One-way binding</p></th><td><p> <code>myValue: '&lt;myValue'</code></p></td><td><p> <code>&lt;my-component [myValue]="anExpression"&gt;</code></p></td></tr><tr><th><p translation-result="on">双向绑定</p><p translation-origin="off">Two-way binding</p></th><td><p> <code>myValue: '=myValue'</code></p></td><td><p translation-result="on">用作双向绑定：<code>&lt;my-component [(myValue)]="anExpression"&gt;</code>。 由于大多数 AngularJS 的双向绑定实际上只是单向绑定，因此通常写成 <code>&lt;my-component [myValue]="anExpression"&gt;</code> 也够用了。</p><p translation-origin="off">As a two-way binding: <code>&lt;my-component [(myValue)]="anExpression"&gt;</code>. Since most AngularJS two-way bindings actually only need a one-way binding in practice, <code>&lt;my-component [myValue]="anExpression"&gt;</code> is often enough.</p></td></tr></tbody></table><p translation-result="on">举个例子，假设 AngularJS 中有一个表示“英雄详情”的组件型指令，它带有一个输入属性和一个输出属性：</p><p translation-origin="off">For example, imagine a hero detail AngularJS component directive with one input and one output:</p><code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" region="hero-detail-io" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">export const heroDetail = { bindings: { hero: '&lt;', deleted: '&amp;' }, template: ` &lt;h2&gt;{{$ctrl.hero.name}} details!&lt;/h2&gt; &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{$ctrl.hero.id}}&lt;/div&gt; &lt;button ng-click="$ctrl.onDelete()"&gt;Delete&lt;/button&gt; `, controller: function() { this.onDelete = () =&gt; { this.deleted(this.hero); }; } };</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> heroDetail </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  bindings</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    hero</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;'</span><span class="pun">,</span><span class="pln">
    deleted</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&amp;'</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;{{$ctrl.hero.name}} details!&lt;/h2&gt;
    &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{$ctrl.hero.id}}&lt;/div&gt;
    &lt;button ng-click="$ctrl.onDelete()"&gt;Delete&lt;/button&gt;
  `</span><span class="pun">,</span><span class="pln">
  controller</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">onDelete </span><span class="pun">=</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">deleted</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">};</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span></code>
    </pre></aio-code></code-example><p translation-result="on">你可以把这个组件升级到 Angular，然后使用 Angular 的模板语法提供这个输入属性和输出属性：</p><p translation-origin="off">You can upgrade this component to Angular, annotate inputs and outputs in the upgrade directive, and then provide the input and output using Angular template syntax:</p><code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" region="hero-detail-io-upgrade" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Directive" class="code-anchor">Directive</a>, <a href="api/core/ElementRef" class="code-anchor">ElementRef</a>, <a href="api/core/Injector" class="code-anchor">Injector</a>, <a href="api/core/Input" class="code-anchor">Input</a>, <a href="api/core/Output" class="code-anchor">Output</a>, <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a> } from '@angular/core'; import { <a href="api/upgrade/static/UpgradeComponent" class="code-anchor">UpgradeComponent</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; import { Hero } from '../hero'; @<a href="api/core/Directive" class="code-anchor">Directive</a>({ selector: 'hero-detail' }) export class HeroDetailDirective extends <a href="api/upgrade/static/UpgradeComponent" class="code-anchor">UpgradeComponent</a> { @<a href="api/core/Input" class="code-anchor">Input</a>() hero: Hero; @<a href="api/core/Output" class="code-anchor">Output</a>() deleted: <a href="api/core/EventEmitter" class="code-anchor">EventEmitter</a>&lt;Hero&gt;; constructor(elementRef: <a href="api/core/ElementRef" class="code-anchor">ElementRef</a>, injector: <a href="api/core/Injector" class="code-anchor">Injector</a>) { super('heroDetail', elementRef, injector); } }</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Directive" class="code-anchor"><span class="typ">Directive</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ElementRef" class="code-anchor"><span class="typ">ElementRef</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Injector" class="code-anchor"><span class="typ">Injector</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Input" class="code-anchor"><span class="typ">Input</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Output" class="code-anchor"><span class="typ">Output</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeComponent" class="code-anchor"><span class="typ">UpgradeComponent</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Hero</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../hero'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Directive" class="code-anchor"><span class="lit">Directive</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hero-detail'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HeroDetailDirective</span><span class="pln"> </span><span class="kwd">extends</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeComponent" class="code-anchor"><span class="typ">UpgradeComponent</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> hero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">;</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Output" class="code-anchor"><span class="lit">Output</span></a><span class="pun">()</span><span class="pln"> deleted</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/EventEmitter" class="code-anchor"><span class="typ">EventEmitter</span></a><span class="pun">&lt;</span><span class="typ">Hero</span><span class="pun">&gt;;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">elementRef</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/ElementRef" class="code-anchor"><span class="typ">ElementRef</span></a><span class="pun">,</span><span class="pln"> injector</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/Injector" class="code-anchor"><span class="typ">Injector</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">super</span><span class="pun">(</span><span class="str">'heroDetail'</span><span class="pun">,</span><span class="pln"> elementRef</span><span class="pun">,</span><span class="pln"> injector</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><code-example path="upgrade-module/src/app/upgrade-io/container.component.ts" header="container.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { Hero } from '../hero'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'my-container', template: ` &lt;h1&gt;Tour of Heroes&lt;/h1&gt; &lt;hero-detail [hero]="hero" (deleted)="heroDeleted($event)"&gt; &lt;/hero-detail&gt; ` }) export class ContainerComponent { hero = new Hero(1, 'Windstorm'); heroDeleted(hero: Hero) { hero.name = 'Ex-' + hero.name; } }</div><header class="ng-star-inserted">container.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from container.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Hero</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../hero'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'my-container'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h1&gt;Tour of Heroes&lt;/h1&gt;
    &lt;hero-detail [hero]="hero"
                 (deleted)="heroDeleted($event)"&gt;
    &lt;/hero-detail&gt;
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ContainerComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  hero </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Windstorm'</span><span class="pun">);</span><span class="pln">
  heroDeleted</span><span class="pun">(</span><span class="pln">hero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    hero</span><span class="pun">.</span><span class="pln">name </span><span class="pun">=</span><span class="pln"> </span><span class="str">'Ex-'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> hero</span><span class="pun">.</span><span class="pln">name</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h3 id="projecting-angularjs-content-into-angular-components" translation-result="on">把 AngularJS 的内容投影到 Angular 组件中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#projecting-angularjs-content-into-angular-components"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="projecting-angularjs-content-into-angular-components">Projecting AngularJS Content into Angular Components<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#projecting-angularjs-content-into-angular-components"><i class="material-icons">link</i></a></h3><img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" class="left" width="250" height="48"><p translation-result="on">如果你在 AngularJS 模板中使用降级后的 Angular 组件时，可能会需要把模板中的一些内容投影进那个组件。 这也是可能的，虽然在 Angular 中并没有透传(transclude)这样的东西，但它有一个非常相似的概念，叫做<em>内容投影</em>。 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 也能让这两个特性实现互操作。</p><p translation-origin="off">When you are using a downgraded Angular component from an AngularJS template, the need may arise to <em>transclude</em> some content into it. This is also possible. While there is no such thing as transclusion in Angular, there is a very similar concept called <em>content projection</em>. <code><a href="api/upgrade/static" class="code-anchor">upgrade/static</a></code> is able to make these two features interoperate.</p><p translation-result="on">Angular 的组件通过使用 <code>&lt;ng-content&gt;</code> 标签来支持内容投影。下面是这类组件的一个例子：</p><p translation-origin="off">Angular components that support content projection make use of an <code>&lt;ng-content&gt;</code> tag within them. Here's an example of such a component:</p><code-example path="upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/Input" class="code-anchor">Input</a> } from '@angular/core'; import { Hero } from '../hero'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'hero-detail', template: ` &lt;h2&gt;{{hero.name}}&lt;/h2&gt; &lt;div&gt; &lt;ng-content&gt;&lt;/ng-content&gt; &lt;/div&gt; ` }) export class HeroDetailComponent { @<a href="api/core/Input" class="code-anchor">Input</a>() hero: Hero; }</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/Input" class="code-anchor"><span class="typ">Input</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Hero</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../hero'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hero-detail'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;{{hero.name}}&lt;/h2&gt;
    &lt;div&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HeroDetailComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="lit">@</span><a href="api/core/Input" class="code-anchor"><span class="lit">Input</span></a><span class="pun">()</span><span class="pln"> hero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">当从 AngularJS 中使用该组件时，你可以为它提供内容。正如它们将在 AngularJS 中被透传一样， 它们也在 Angular 中被投影到了 <code>&lt;ng-content&gt;</code> 标签所在的位置：</p><p translation-origin="off">When using the component from AngularJS, you can supply contents for it. Just like they would be transcluded in AngularJS, they get projected to the location of the <code>&lt;ng-content&gt;</code> tag in Angular:</p><code-example path="upgrade-module/src/index-ajs-to-a-projection.html" region="usecomponent" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div ng-controller="MainController as mainCtrl"&gt; &lt;hero-detail [hero]="mainCtrl.hero"&gt; &lt;!-- Everything here will get projected --&gt; &lt;p&gt;{{mainCtrl.hero.description}}&lt;/p&gt; &lt;/hero-detail&gt; &lt;/div&gt;</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-controller</span><span class="pun">=</span><span class="atv">"MainController as mainCtrl"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;hero-detail</span><span class="pln"> [</span><span class="atn">hero</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"mainCtrl.hero"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- Everything here will get projected --&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">{{mainCtrl.hero.description}}</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/hero-detail&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">当 AngularJS 的内容被投影到 Angular 组件中时，它仍然留在“AngularJS 王国”中，并被 AngularJS 框架管理着。</p><p translation-origin="off">When AngularJS content gets projected inside an Angular component, it still remains in "AngularJS land" and is managed by the AngularJS framework.</p></div><h3 id="transcluding-angular-content-into-angularjs-component-directives" translation-result="on">把 Angular 的内容透传进 AngularJS 的组件型指令<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#transcluding-angular-content-into-angularjs-component-directives"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="transcluding-angular-content-into-angularjs-component-directives">Transcluding Angular Content into AngularJS Component Directives<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#transcluding-angular-content-into-angularjs-component-directives"><i class="material-icons">link</i></a></h3><img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" class="left" width="250" height="48"><p translation-result="on">就像可以把 AngularJS 的内容投影进 Angular 组件一样，你也能把 Angular 的内容<em>透传</em>进 AngularJS 的组件， 但不管怎样，你都要使用它们升级过的版本。</p><p translation-origin="off">Just as you can project AngularJS content into Angular components, you can <em>transclude</em> Angular content into AngularJS components, whenever you are using upgraded versions from them.</p><p translation-result="on">如果一个 AngularJS 组件型指令支持透传，它就会在自己的模板中使用 <code>ng-transclude</code> 指令标记出透传到的位置：</p><p translation-origin="off">When an AngularJS component directive supports transclusion, it may use the <code>ng-transclude</code> directive in its template to mark the transclusion point:</p><code-example path="upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">export const heroDetail = { bindings: { hero: '=' }, template: ` &lt;h2&gt;{{$ctrl.hero.name}}&lt;/h2&gt; &lt;div&gt; &lt;ng-transclude&gt;&lt;/ng-transclude&gt; &lt;/div&gt; `, transclude: true };</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> heroDetail </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  bindings</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    hero</span><span class="pun">:</span><span class="pln"> </span><span class="str">'='</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;{{$ctrl.hero.name}}&lt;/h2&gt;
    &lt;div&gt;
      &lt;ng-transclude&gt;&lt;/ng-transclude&gt;
    &lt;/div&gt;
  `</span><span class="pun">,</span><span class="pln">
  transclude</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
</span><span class="pun">};</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果你升级这个组件，并把它用在 Angular 中，你就能把准备透传的内容放进这个组件的标签中。</p><p translation-origin="off">If you upgrade this component and use it from Angular, you can populate the component tag with contents that will then get transcluded:</p><code-example path="upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts" header="container.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { Hero } from '../hero'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'my-container', template: ` &lt;hero-detail [hero]="hero"&gt; &lt;!-- Everything here will get transcluded --&gt; &lt;p&gt;{{hero.description}}&lt;/p&gt; &lt;/hero-detail&gt; ` }) export class ContainerComponent { hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds'); }</div><header class="ng-star-inserted">container.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from container.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Hero</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../hero'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'my-container'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;hero-detail [hero]="hero"&gt;
      &lt;!-- Everything here will get transcluded --&gt;
      &lt;p&gt;{{hero.description}}&lt;/p&gt;
    &lt;/hero-detail&gt;
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ContainerComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  hero </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Windstorm'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Specific powers of controlling winds'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h3 id="making-angularjs-dependencies-injectable-to-angular" translation-result="on">让 AngularJS 中的依赖可被注入到 Angular<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#making-angularjs-dependencies-injectable-to-angular"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="making-angularjs-dependencies-injectable-to-angular">Making AngularJS Dependencies Injectable to Angular<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#making-angularjs-dependencies-injectable-to-angular"><i class="material-icons">link</i></a></h3><p translation-result="on">当运行一个混合式应用时，可能会遇到这种情况：你需要把某些 AngularJS 的依赖注入到 Angular 代码中。 这可能是因为某些业务逻辑仍然在 AngularJS 服务中，或者需要某些 AngularJS 的内置服务，比如 <code>$location</code> 或 <code>$timeout</code>。</p><p translation-origin="off">When running a hybrid app, you may encounter situations where you need to inject some AngularJS dependencies into your Angular code. Maybe you have some business logic still in AngularJS services. Maybe you want access to AngularJS's built-in services like <code>$location</code> or <code>$timeout</code>.</p><p translation-result="on">在这些情况下，把一个 AngularJS 提供商<em>升级到</em>Angular 也是有可能的。这就让它将来有可能被注入到 Angular 代码中的某些地方。 比如，你可能在 AngularJS 中有一个名叫 <code>HeroesService</code> 的服务：</p><p translation-origin="off">In these situations, it is possible to <em>upgrade</em> an AngularJS provider to Angular. This makes it possible to then inject it somewhere in Angular code. For example, you might have a service called <code>HeroesService</code> in AngularJS:</p><code-example path="upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts" header="heroes.service.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { Hero }&nbsp;from '../hero'; export class HeroesService { get() { return [ new Hero(1, 'Windstorm'), new Hero(2, 'Spiderman') ]; } }</div><header class="ng-star-inserted">heroes.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from heroes.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Hero</span><span class="pln"> </span><span class="pun">}</span><span class="pln">&nbsp;</span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../hero'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HeroesService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">get</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
      </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Windstorm'</span><span class="pun">),</span><span class="pln">
      </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">(</span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Spiderman'</span><span class="pun">)</span><span class="pln">
    </span><span class="pun">];</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">你可以用 Angular 的<a href="guide/dependency-injection-providers#factory-providers">工厂提供商</a>升级该服务， 它从 AngularJS 的 <code><a href="api/upgrade/static/UpgradeModule#$injector" class="code-anchor">$injector</a></code> 请求服务。</p><p translation-origin="off">You can upgrade the service using a Angular <a href="guide/dependency-injection-providers#factory-providers">factory provider</a> that requests the service from the AngularJS <code><a href="api/upgrade/static/UpgradeModule#$injector" class="code-anchor">$injector</a></code>.</p><p translation-result="on">很多开发者都喜欢在一个独立的 <code>ajs-upgraded-providers.ts</code> 中声明这个工厂提供商，以便把它们都放在一起，这样便于引用、创建新的以及在升级完毕时删除它们。</p><p translation-origin="off">Many developers prefer to declare the factory provider in a separate <code>ajs-upgraded-providers.ts</code> file so that they are all together, making it easier to reference them, create new ones and delete them once the upgrade is over.</p><p translation-result="on">同时，建议导出 <code>heroesServiceFactory</code> 函数，以便 AOT 编译器可以拿到它们。</p><p translation-origin="off">It's also recommended to export the <code>heroesServiceFactory</code> function so that Ahead-of-Time compilation can pick it up.</p><div class="alert is-helpful"><p translation-result="on"><strong>注意：</strong>这个工厂中的字符串 'heroes' 指向的是 AngularJS 的 <code>HeroesService</code>。 AngularJS 应用中通常使用服务名作为令牌，比如 'heroes'，并为其追加 'Service' 后缀来创建其类名。</p><p translation-origin="off"><strong>Note:</strong> The 'heroes' string inside the factory refers to the AngularJS <code>HeroesService</code>. It is common in AngularJS apps to choose a service name for the token, for example "heroes", and append the "Service" suffix to create the class name.</p></div><code-example path="upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts" header="ajs-upgraded-providers.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { HeroesService } from './heroes.service'; export function heroesServiceFactory(i: any) { return i.get('heroes'); } export const heroesServiceProvider = { provide: HeroesService, <a href="api/core/FactorySansProvider#useFactory" class="code-anchor">useFactory</a>: heroesServiceFactory, deps: ['$injector'] };</div><header class="ng-star-inserted">ajs-upgraded-providers.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from ajs-upgraded-providers.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">HeroesService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./heroes.service'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> heroesServiceFactory</span><span class="pun">(</span><span class="pln">i</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> i</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'heroes'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> heroesServiceProvider </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  provide</span><span class="pun">:</span><span class="pln"> </span><span class="typ">HeroesService</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/FactorySansProvider#useFactory" class="code-anchor"><span class="pln">useFactory</span></a><span class="pun">:</span><span class="pln"> heroesServiceFactory</span><span class="pun">,</span><span class="pln">
  deps</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'$injector'</span><span class="pun">]</span><span class="pln">
</span><span class="pun">};</span></code>
    </pre></aio-code></code-example><p translation-result="on">然后，你就可以把这个服务添加到 <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 中来把它暴露给 Angular：</p><p translation-origin="off">You can then provide the service to Angular by adding it to the <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code>:</p><code-example path="upgrade-module/src/app/ajs-to-a-providers/app.module.ts" region="register" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { heroesServiceProvider } from './ajs-upgraded-providers'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a> ], providers: [ heroesServiceProvider ], /* . . . */ }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> heroesServiceProvider </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./ajs-upgraded-providers'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    heroesServiceProvider
  </span><span class="pun">],</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'heroApp'</span><span class="pun">],</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> strictDi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">然后在组件的构造函数中使用该服务的类名作为类型注解注入到组件中，从而在组件中使用它：</p><p translation-origin="off">Then use the service inside your component by injecting it in the component constructor using its class as a type annotation:</p><code-example path="upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { HeroesService } from './heroes.service'; import { Hero } from '../hero'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'hero-detail', template: ` &lt;h2&gt;{{hero.id}}: {{hero.name}}&lt;/h2&gt; ` }) export class HeroDetailComponent { hero: Hero; constructor(heroes: HeroesService) { this.hero = heroes.get()[0]; } }</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">HeroesService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./heroes.service'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Hero</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../hero'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'hero-detail'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;{{hero.id}}: {{hero.name}}&lt;/h2&gt;
  `</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HeroDetailComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  hero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">heroes</span><span class="pun">:</span><span class="pln"> </span><span class="typ">HeroesService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero </span><span class="pun">=</span><span class="pln"> heroes</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">()[</span><span class="lit">0</span><span class="pun">];</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">在这个例子中，你升级了服务类。当注入它时，你可以使用 TypeScript 类型注解来获得这些额外的好处。 它没有影响该依赖的处理过程，同时还得到了启用静态类型检查的好处。 任何 AngularJS 中的服务、工厂和提供商都能被升级 —— 尽管这不是必须的。</p><p translation-origin="off">In this example you upgraded a service class. You can use a TypeScript type annotation when you inject it. While it doesn't affect how the dependency is handled, it enables the benefits of static type checking. This is not required though, and any AngularJS service, factory, or provider can be upgraded.</p></div><h3 id="making-angular-dependencies-injectable-to-angularjs" translation-result="on">让 Angular 的依赖能被注入到 AngularJS 中<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#making-angular-dependencies-injectable-to-angularjs"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="making-angular-dependencies-injectable-to-angularjs">Making Angular Dependencies Injectable to AngularJS<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#making-angular-dependencies-injectable-to-angularjs"><i class="material-icons">link</i></a></h3><p translation-result="on">除了能升级 AngularJS 依赖之外，你还能<em>降级</em>Angular 的依赖，以便在 AngularJS 中使用它们。 当你已经开始把服务移植到 Angular 或在 Angular 中创建新服务，但同时还有一些用 AngularJS 写成的组件时，这会非常有用。</p><p translation-origin="off">In addition to upgrading AngularJS dependencies, you can also <em>downgrade</em> Angular dependencies, so that you can use them from AngularJS. This can be useful when you start migrating services to Angular or creating new services in Angular while retaining components written in AngularJS.</p><p translation-result="on">例如，你可能有一个 Angular 的 <code>Heroes</code> 服务：</p><p translation-origin="off">For example, you might have an Angular service called <code>Heroes</code>:</p><code-example path="upgrade-module/src/app/a-to-ajs-providers/heroes.ts" header="heroes.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Injectable" class="code-anchor">Injectable</a> } from '@angular/core'; import { Hero }&nbsp;from '../hero'; @<a href="api/core/Injectable" class="code-anchor">Injectable</a>() export class Heroes { get() { return [ new Hero(1, 'Windstorm'), new Hero(2, 'Spiderman') ]; } }</div><header class="ng-star-inserted">heroes.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from heroes.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Injectable" class="code-anchor"><span class="typ">Injectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Hero</span><span class="pln"> </span><span class="pun">}</span><span class="pln">&nbsp;</span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../hero'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">()</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">Heroes</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">get</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
      </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Windstorm'</span><span class="pun">),</span><span class="pln">
      </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">(</span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Spiderman'</span><span class="pun">)</span><span class="pln">
    </span><span class="pun">];</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">仿照 Angular 组件，把该提供商加入 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 的 <code>providers</code> 列表中，以注册它。</p><p translation-origin="off">Again, as with Angular components, register the provider with the <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> by adding it to the module's <code>providers</code> list.</p><code-example path="upgrade-module/src/app/a-to-ajs-providers/app.module.ts" region="ngmodule" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { Heroes } from './heroes'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a> ], providers: [ Heroes ] }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Heroes</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./heroes'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">Heroes</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'heroApp'</span><span class="pun">],</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> strictDi</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在，用 <code><a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a>()</code> 来把 Angular 的 <code>Heroes</code> 包装成<em>AngularJS 的工厂函数</em>，并把这个工厂注册进 AngularJS 的模块中。 依赖在 AngularJS 中的名字你可以自己定：</p><p translation-origin="off">Now wrap the Angular <code>Heroes</code> in an <em>AngularJS factory function</em> using <code><a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a>()</code> and plug the factory into an AngularJS module. The name of the AngularJS dependency is up to you:</p><code-example path="upgrade-module/src/app/a-to-ajs-providers/app.module.ts" region="register" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { Heroes } from './heroes'; /* . . . */ import { <a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; angular.module('heroApp', []) .factory('heroes', <a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a>(Heroes)) .component('heroDetail', heroDetailComponent);</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Heroes</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./heroes'</span><span class="pun">;</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/downgradeInjectable" class="code-anchor"><span class="pln">downgradeInjectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'heroApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[])</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">factory</span><span class="pun">(</span><span class="str">'heroes'</span><span class="pun">,</span><span class="pln"> </span><a href="api/upgrade/static/downgradeInjectable" class="code-anchor"><span class="pln">downgradeInjectable</span></a><span class="pun">(</span><span class="typ">Heroes</span><span class="pun">))</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">component</span><span class="pun">(</span><span class="str">'heroDetail'</span><span class="pun">,</span><span class="pln"> heroDetailComponent</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">此后，该服务就能被注入到 AngularJS 代码中的任何地方了：</p><p translation-origin="off">After this, the service is injectable anywhere in AngularJS code:</p><code-example path="upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts" header="hero-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">export const heroDetailComponent = { template: ` &lt;h2&gt;{{$ctrl.hero.id}}: {{$ctrl.hero.name}}&lt;/h2&gt; `, controller: ['heroes', function(heroes: Heroes) { this.hero = heroes.get()[0]; }] };</div><header class="ng-star-inserted">hero-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from hero-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> heroDetailComponent </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
    &lt;h2&gt;{{$ctrl.hero.id}}: {{$ctrl.hero.name}}&lt;/h2&gt;
  `</span><span class="pun">,</span><span class="pln">
  controller</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'heroes'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">heroes</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Heroes</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">hero </span><span class="pun">=</span><span class="pln"> heroes</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">()[</span><span class="lit">0</span><span class="pun">];</span><span class="pln">
  </span><span class="pun">}]</span><span class="pln">
</span><span class="pun">};</span></code>
    </pre></aio-code></code-example><h2 id="lazy-loading-angularjs" translation-result="on">惰性加载 AngularJS<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#lazy-loading-angularjs"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="lazy-loading-angularjs">Lazy Loading AngularJS<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#lazy-loading-angularjs"><i class="material-icons">link</i></a></h2><p translation-result="on">在构建应用时，你需要确保只在必要的时候才加载所需的资源，无论是加载静态资产（Asset）还是代码。要确保任何事都尽量推迟到必要时才去做，以便让应用更高效的运行。当要在同一个应用中运行不同的框架时，更是如此。</p><p translation-origin="off">When building applications, you want to ensure that only the required resources are loaded when necessary. Whether that be loading of assets or code, making sure everything that can be deferred until needed keeps your application running efficiently. This is especially true when running different frameworks in the same application.</p><p translation-result="on"><a href="guide/glossary#lazy-loading">惰性加载</a>是一项技术，它会推迟到使用时才加载所需静态资产和代码资源。这可以减少启动时间、提高效率，特别是要在同一个应用中运行不同的框架时。</p><p translation-origin="off"><a href="guide/glossary#lazy-loading">Lazy loading</a> is a technique that defers the loading of required assets and code resources until they are actually used. This reduces startup time and increases efficiency, especially when running different frameworks in the same application.</p><p translation-result="on">当你采用混合式应用的方式将大型应用从 AngularJS 迁移到 Angular 时，你首先要迁移一些最常用的特性，并且只在必要的时候才使用那些不太常用的特性。这样做有助于确保应用程序在迁移过程中仍然能为用户提供无缝的体验。</p><p translation-origin="off">When migrating large applications from AngularJS to Angular using a hybrid approach, you want to migrate some of the most commonly used features first, and only use the less commonly used features if needed. Doing so helps you ensure that the application is still providing a seamless experience for your users while you are migrating.</p><p translation-result="on">在大多数需要同时用 Angular 和 AngularJS 渲染应用的环境中，这两个框架都会包含在发送给客户端的初始发布包中。这会导致发布包的体积增大、性能降低。</p><p translation-origin="off">In most environments where both Angular and AngularJS are used to render the application, both frameworks are loaded in the initial bundle being sent to the client. This results in both increased bundle size and possible reduced performance.</p><p translation-result="on">当用户停留在由 Angular 呈现的页面上时，应用的整体性能也会受到影响。这是因为 AngularJS 的框架和应用仍然被加载并运行了 —— 即使它们从未被访问过。</p><p translation-origin="off">Overall application performance is affected in cases where the user stays on Angular-rendered pages because the AngularJS framework and application are still loaded and running, even if they are never accessed.</p><p translation-result="on">你可以采取一些措施来缓解这些包的大小和性能问题。通过把 AngularJS 应用程序分离到一个单独的发布包中，你就可以利用<a href="guide/glossary#lazy-loading">惰性加载</a>技术来只在必要的时候才加载、引导和呈现这个 AngularJS 应用。这种策略减少了你的初始发布包大小，推迟了同时加载两个框架的潜在影响 —— 直到绝对必要时才加载，以便让你的应用尽可能高效地运行。</p><p translation-origin="off">You can take steps to mitigate both bundle size and performance issues. By isolating your AngularJS app to a separate bundle, you can take advantage of <a href="guide/glossary#lazy-loading">lazy loading</a> to load, bootstrap, and render the AngularJS application only when needed. This strategy reduces your initial bundle size, defers any potential impact from loading both frameworks until absolutely necessary, and keeps your application running as efficiently as possible.</p><p translation-result="on">下面的步骤介绍了应该如何去做：</p><p translation-origin="off">The steps below show you how to do the following:</p><ul><li><p translation-result="on">为 AngularJS 发布包设置一个回调函数。</p><p translation-origin="off">Setup a callback function for your AngularJS bundle.</p></li><li><p translation-result="on">创建一个服务，以便惰性加载并引导你的 AngularJS 应用。</p><p translation-origin="off">Create a service that lazy loads and bootstraps your AngularJS app.</p></li><li><p translation-result="on">为 AngularJS 的内容创建一个可路由的组件</p><p translation-origin="off">Create a routable component for AngularJS content</p></li><li><p translation-result="on">为 AngularJS 特有的 URL 创建自定义的 <code><a href="api/router/Route#matcher" class="code-anchor">matcher</a></code> 函数，并为 AngularJS 的各个路由配上带有自定义匹配器的 Angular 路由器。</p><p translation-origin="off">Create a custom <code><a href="api/router/Route#matcher" class="code-anchor">matcher</a></code> function for AngularJS-specific URLs and configure the Angular <code><a href="api/router/Router" class="code-anchor">Router</a></code> with the custom matcher for AngularJS routes.</p></li></ul><h3 id="create-a-service-to-lazy-load-angularjs" translation-result="on">为惰性加载 AngularJS 创建一个服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#create-a-service-to-lazy-load-angularjs"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="create-a-service-to-lazy-load-angularjs">Create a service to lazy load AngularJS<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#create-a-service-to-lazy-load-angularjs"><i class="material-icons">link</i></a></h3><p translation-result="on">在 Angular 的版本 8 中，惰性加载代码只需使用动态导入语法 <code>import('...')</code> 即可。在这个应用中，你创建了一个新服务，它使用动态导入技术来惰性加载 AngularJS。</p><p translation-origin="off">As of Angular version 8, lazy loading code can be accomplished simply by using the dynamic import syntax <code>import('...')</code>. In your application, you create a new service that uses dynamic imports to lazy load AngularJS.</p><code-example path="upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts" header="src/app/lazy-loader.service.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Injectable" class="code-anchor">Injectable</a> } from '@angular/core'; import * as angular from 'angular'; @<a href="api/core/Injectable" class="code-anchor">Injectable</a>({ <a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root' }) export class LazyLoaderService { private app: angular.auto.IInjectorService; load(el: HTMLElement): void { import('./angularjs-app').then(app =&gt; { try { this.app = app.bootstrap(el); } catch (e) { console.error(e); } }); } destroy() { if (this.app) { this.app.get('$rootScope').$destroy(); } } }</div><header class="ng-star-inserted">src/app/lazy-loader.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/lazy-loader.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Injectable" class="code-anchor"><span class="typ">Injectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="kwd">as</span><span class="pln"> angular </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'angular'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">({</span><span class="pln">
  </span><a href="api/core/Injectable#providedIn" class="code-anchor"><span class="pln">providedIn</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'root'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">LazyLoaderService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">private</span><span class="pln"> app</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="kwd">auto</span><span class="pun">.</span><span class="typ">IInjectorService</span><span class="pun">;</span><span class="pln">

  load</span><span class="pun">(</span><span class="pln">el</span><span class="pun">:</span><span class="pln"> </span><span class="typ">HTMLElement</span><span class="pun">):</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">import</span><span class="pun">(</span><span class="str">'./angularjs-app'</span><span class="pun">).</span><span class="kwd">then</span><span class="pun">(</span><span class="pln">app </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">try</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">app </span><span class="pun">=</span><span class="pln"> app</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">el</span><span class="pun">);</span><span class="pln">
      </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">catch</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">error</span><span class="pun">(</span><span class="pln">e</span><span class="pun">);</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  destroy</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">app</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">app</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'$rootScope'</span><span class="pun">).</span><span class="pln">$destroy</span><span class="pun">();</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">该服务使用 <code>import()</code> 方法惰性加载打包好的 AngularJS 应用。这会减少应用初始包的大小，因为你尚未加载用户目前不需要的代码。你还要提供一种方法，在加载完毕后手动<em>启动</em>它。 AngularJS 提供了一种使用 <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap">angular.bootstrap()</a> 方法并传入一个 HTML 元素来手动引导应用的方法。你的 AngularJS 应用也应该公开一个用来引导 AngularJS 应用的 <code>bootstrap</code> 方法。</p><p translation-origin="off">The service uses the <code>import()</code> method to load your bundled AngularJS application lazily. This decreases the initial bundle size of your application as you're not loading code your user doesn't need yet. You also need to provide a way to <em>bootstrap</em> the application manually after it has been loaded. AngularJS provides a way to manually bootstrap an application using the <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap">angular.bootstrap()</a> method with a provided HTML element. Your AngularJS app should also expose a <code>bootstrap</code> method that bootstraps the AngularJS app.</p><p translation-result="on">要确保 AngularJS 应用中的任何清理工作都触发过（比如移除全局监听器），你还可以实现一个方法来调用 <code>$rootScope.destroy()</code> 方法。</p><p translation-origin="off">To ensure any necessary teardown is triggered in the AngularJS app, such as removal of global listeners, you also implement a method to call the <code>$rootScope.destroy()</code> method.</p><code-example path="upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts" header="angularjs-app" ng-version="9.0.0-rc.11"><div style="display:none">import * as angular from 'angular'; import 'angular-route'; const appName = 'myApp'; angular.module(appName, [ 'ngRoute' ]) .config(['$routeProvider', '$locationProvider', function <a href="api/router/Router#config" class="code-anchor">config</a>($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider. when('/users', { template: ` &lt;p&gt; Users Page &lt;/p&gt; ` }). otherwise({ template: '' }); }] ); export function bootstrap(el: HTMLElement) { return angular.bootstrap(el, [appName]); }</div><header class="ng-star-inserted">angularjs-app</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from angularjs-app">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="kwd">as</span><span class="pln"> angular </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'angular'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="str">'angular-route'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">const</span><span class="pln"> appName </span><span class="pun">=</span><span class="pln"> </span><span class="str">'myApp'</span><span class="pun">;</span><span class="pln">

angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="pln">appName</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="str">'ngRoute'</span><span class="pln">
</span><span class="pun">])</span><span class="pln">
</span><span class="pun">.</span><span class="pln">config</span><span class="pun">([</span><span class="str">'$routeProvider'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'$locationProvider'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">function</span><span class="pln"> </span><a href="api/router/Router#config" class="code-anchor"><span class="pln">config</span></a><span class="pun">(</span><span class="pln">$routeProvider</span><span class="pun">,</span><span class="pln"> $locationProvider</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    $locationProvider</span><span class="pun">.</span><span class="pln">html5Mode</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">

    $routeProvider</span><span class="pun">.</span><span class="pln">
      </span><span class="kwd">when</span><span class="pun">(</span><span class="str">'/users'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">`
          &lt;p&gt;
            Users Page
          &lt;/p&gt;
        `</span><span class="pln">
      </span><span class="pun">}).</span><span class="pln">
      otherwise</span><span class="pun">({</span><span class="pln">
        </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pln">
      </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}]</span><span class="pln">
</span><span class="pun">);</span><span class="pln">

</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> bootstrap</span><span class="pun">(</span><span class="pln">el</span><span class="pun">:</span><span class="pln"> </span><span class="typ">HTMLElement</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">el</span><span class="pun">,</span><span class="pln">  </span><span class="pun">[</span><span class="pln">appName</span><span class="pun">]);</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">你的 AngularJS 应用只配置了呈现内容所需的那部分路由。而 Angular 路由器会处理应用中其余的路由。你的 Angular 应用中会调用公开的 <code>bootstrap</code> 方法，让它在加载完发布包之后引导 AngularJS 应用。</p><p translation-origin="off">Your AngularJS application is configured with only the routes it needs to render content. The remaining routes in your application are handled by the Angular Router. The exposed <code>bootstrap</code> method is called in your Angular app to bootstrap the AngularJS application after the bundle is loaded.</p><div class="alert is-important"><p translation-result="on"><strong>注意：</strong>当 AngularJS 加载并引导完毕后，监听器（比如路由配置中的那些监听器）会继续监听路由的变化。为了确保当 AngularJS 尚未显示时先关闭监听器，请在 <a href="https://docs.angularjs.org/api/ngRoute/provider/$routeProvider">$routeProvider</a> 中配置一个渲染空模板 <code>otherwise</code> 选项。这里假设 Angular 将处理所有其它路由。</p><p translation-origin="off"><strong>Note:</strong> After AngularJS is loaded and bootstrapped, listeners such as those wired up in your route configuration will continue to listen for route changes. To ensure listeners are shut down when AngularJS isn't being displayed, configure an <code>otherwise</code> option with the <a href="https://docs.angularjs.org/api/ngRoute/provider/$routeProvider">$routeProvider</a> that renders an empty template. This assumes all other routes will be handled by Angular.</p></div><h3 id="create-a-component-to-render-angularjs-content" translation-result="on">创建一个用来渲染 AngularJS 内容的组件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#create-a-component-to-render-angularjs-content"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="create-a-component-to-render-angularjs-content">Create a component to render AngularJS content<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#create-a-component-to-render-angularjs-content"><i class="material-icons">link</i></a></h3><p translation-result="on">在 Angular 应用中，你需要一个组件作为 AngularJS 内容的占位符。该组件使用你创建的服务，并在组件初始化完成后加载并引导你的 AngularJS 应用。</p><p translation-origin="off">In your Angular application, you need a component as a placeholder for your AngularJS content. This component uses the service you create to load and bootstrap your AngularJS app after the component is initialized.</p><code-example path="upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts" header="src/app/angular-js/angular-js.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/OnInit" class="code-anchor">OnInit</a>, <a href="api/core/OnDestroy" class="code-anchor">OnDestroy</a>, <a href="api/core/ElementRef" class="code-anchor">ElementRef</a> } from '@angular/core'; import { LazyLoaderService } from '../lazy-loader.service'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-angular-js', template: '&lt;div ng-view&gt;&lt;/div&gt;' }) export class AngularJSComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a>, <a href="api/core/OnDestroy" class="code-anchor">OnDestroy</a> { constructor( private lazyLoader: LazyLoaderService, private elRef: <a href="api/core/ElementRef" class="code-anchor">ElementRef</a> ) {} ngOnInit() { this.lazyLoader.load(this.elRef.nativeElement); } ngOnDestroy() { this.lazyLoader.destroy(); } }</div><header class="ng-star-inserted">src/app/angular-js/angular-js.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/angular-js/angular-js.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnDestroy" class="code-anchor"><span class="typ">OnDestroy</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ElementRef" class="code-anchor"><span class="typ">ElementRef</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">LazyLoaderService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../lazy-loader.service'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-angular-js'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;div ng-view&gt;&lt;/div&gt;'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AngularJSComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnDestroy" class="code-anchor"><span class="typ">OnDestroy</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> lazyLoader</span><span class="pun">:</span><span class="pln"> </span><span class="typ">LazyLoaderService</span><span class="pun">,</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> elRef</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/ElementRef" class="code-anchor"><span class="typ">ElementRef</span></a><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">

  ngOnInit</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">lazyLoader</span><span class="pun">.</span><span class="pln">load</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">elRef</span><span class="pun">.</span><span class="pln">nativeElement</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">


  ngOnDestroy</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">lazyLoader</span><span class="pun">.</span><span class="pln">destroy</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">当 Angular 的路由器匹配到使用 AngularJS 的路由时，会渲染 <code>AngularJSComponent</code>，并在 AngularJS 的 <a href="https://docs.angularjs.org/api/ngRoute/directive/ngView"><code>ng-view</code></a>指令中渲染内容。当用户导航离开本路由时，<code>$rootScope</code> 会在 AngularJS 应用中被销毁。</p><p translation-origin="off">When the Angular Router matches a route that uses AngularJS, the <code>AngularJSComponent</code> is rendered, and the content is rendered within the AngularJS <a href="https://docs.angularjs.org/api/ngRoute/directive/ngView"><code>ng-view</code></a>directive. When the user navigates away from the route, the <code>$rootScope</code> is destroyed on the AngularJS application.</p><h3 id="configure-a-custom-route-matcher-for-angularjs-routes" translation-result="on">为那些 AngularJS 路由配置自定义路由匹配器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#configure-a-custom-route-matcher-for-angularjs-routes"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="configure-a-custom-route-matcher-for-angularjs-routes">Configure a custom route matcher for AngularJS routes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#configure-a-custom-route-matcher-for-angularjs-routes"><i class="material-icons">link</i></a></h3><p translation-result="on">为了配置 Angular 的路由器，你必须为 AngularJS 的 URL 定义路由。要匹配这些 URL，你需要添加一个使用 <code><a href="api/router/Route#matcher" class="code-anchor">matcher</a></code> 属性的路由配置。这个 <code><a href="api/router/Route#matcher" class="code-anchor">matcher</a></code> 允许你使用自定义模式来匹配这些 URL 路径。 Angular 的路由器会首先尝试匹配更具体的路由，比如静态路由和可变路由。当它找不到匹配项时，就会求助于路由配置中的自定义匹配器。如果自定义匹配器与某个路由不匹配，它就会转到用于 "捕获所有"（catch-all）的路由，比如 404 页面。</p><p translation-origin="off">To configure the Angular Router, you must define a route for AngularJS URLs. To match those URLs, you add a route configuration that uses the <code><a href="api/router/Route#matcher" class="code-anchor">matcher</a></code> property. The <code><a href="api/router/Route#matcher" class="code-anchor">matcher</a></code> allows you to use custom pattern matching for URL paths. The Angular Router tries to match on more specific routes such as static and variable routes first. When it doesn't find a match, it then looks at custom matchers defined in your route configuration. If the custom matchers don't match a route, it then goes to catch-all routes, such as a 404 page.</p><p translation-result="on">下面的例子给 AngularJS 路由定义了一个自定义匹配器函数。</p><p translation-origin="off">The following example defines a custom matcher function for AngularJS routes.</p><code-example path="upgrade-lazy-load-ajs/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="matcher" ng-version="9.0.0-rc.11"><div style="display:none">export function isAngularJSUrl(url: <a href="api/router/UrlSegment" class="code-anchor">UrlSegment</a>[]) { return url.length &gt; 0 &amp;&amp; url[0].path.startsWith('users') ? ({consumed: url}) : null; }</div><header class="ng-star-inserted">src/app/app-routing.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app-routing.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> isAngularJSUrl</span><span class="pun">(</span><span class="pln">url</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/UrlSegment" class="code-anchor"><span class="typ">UrlSegment</span></a><span class="pun">[])</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> url</span><span class="pun">.</span><span class="pln">length </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> url</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">path</span><span class="pun">.</span><span class="pln">startsWith</span><span class="pun">(</span><span class="str">'users'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> </span><span class="pun">({</span><span class="pln">consumed</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">})</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">下列代码往你的路由配置中添加了一个路由对象，其 <code><a href="api/router/Route#matcher" class="code-anchor">matcher</a></code> 属性是这个自定义匹配器，而 <code>component</code> 属性为 <code>AngularJSComponent</code>。</p><p translation-origin="off">The following code adds a route object to your routing configuration using the <code><a href="api/router/Route#matcher" class="code-anchor">matcher</a></code> property and custom matcher, and the <code>component</code> property with <code>AngularJSComponent</code>.</p><code-example path="upgrade-lazy-load-ajs/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/router/Routes" class="code-anchor">Routes</a>, <a href="api/router/RouterModule" class="code-anchor">RouterModule</a>, <a href="api/router/UrlSegment" class="code-anchor">UrlSegment</a> } from '@angular/router'; import { AngularJSComponent } from './angular-js/angular-js.component'; import { HomeComponent } from './home/home.component'; import { App404Component } from './app404/app404.component'; // Match any <a href="api/core/SecurityContext#URL" class="code-anchor">URL</a> that starts with `users` export function isAngularJSUrl(url: <a href="api/router/UrlSegment" class="code-anchor">UrlSegment</a>[]) { return url.length &gt; 0 &amp;&amp; url[0].path.startsWith('users') ? ({consumed: url}) : null; } export const routes: <a href="api/router/Routes" class="code-anchor">Routes</a> = [ // <a href="api/router/Routes" class="code-anchor">Routes</a> rendered by Angular { path: '', component: HomeComponent }, // AngularJS routes { <a href="api/router/Route#matcher" class="code-anchor">matcher</a>: isAngularJSUrl, component: AngularJSComponent }, // Catch-all route { path: '**', component: App404Component } ]; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [RouterModule.forRoot(routes)], exports: [<a href="api/router/RouterModule" class="code-anchor">RouterModule</a>] }) export class AppRoutingModule { }</div><header class="ng-star-inserted">src/app/app-routing.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app-routing.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/Routes" class="code-anchor"><span class="typ">Routes</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/router/RouterModule" class="code-anchor"><span class="typ">RouterModule</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/router/UrlSegment" class="code-anchor"><span class="typ">UrlSegment</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AngularJSComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./angular-js/angular-js.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">HomeComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./home/home.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">App404Component</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app404/app404.component'</span><span class="pun">;</span><span class="pln">

</span><span class="com">// Match any </span><a href="api/core/SecurityContext#URL" class="code-anchor"><span class="com">URL</span></a><span class="com"> that starts with `users`</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> isAngularJSUrl</span><span class="pun">(</span><span class="pln">url</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/UrlSegment" class="code-anchor"><span class="typ">UrlSegment</span></a><span class="pun">[])</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> url</span><span class="pun">.</span><span class="pln">length </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> url</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">path</span><span class="pun">.</span><span class="pln">startsWith</span><span class="pun">(</span><span class="str">'users'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> </span><span class="pun">({</span><span class="pln">consumed</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">})</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> routes</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/Routes" class="code-anchor"><span class="typ">Routes</span></a><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="com">// </span><a href="api/router/Routes" class="code-anchor"><span class="com">Routes</span></a><span class="com"> rendered by Angular</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">HomeComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">

  </span><span class="com">// AngularJS routes</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/Route#matcher" class="code-anchor"><span class="pln">matcher</span></a><span class="pun">:</span><span class="pln"> isAngularJSUrl</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">AngularJSComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">

  </span><span class="com">// Catch-all route</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'**'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">App404Component</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">];</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="typ">RouterModule</span><span class="pun">.</span><span class="pln">forRoot</span><span class="pun">(</span><span class="pln">routes</span><span class="pun">)],</span><span class="pln">
  exports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><a href="api/router/RouterModule" class="code-anchor"><span class="typ">RouterModule</span></a><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppRoutingModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">当你的应用匹配上需要 AngularJS 的路由时，AngularJS 应用就会被加载并引导。AngularJS 路由会匹配必要的 URL 以渲染它们的内容，而接下来你的应用就会同时运行 AngularJS 和 Angular 框架。</p><p translation-origin="off">When your application matches a route that needs AngularJS, the AngularJS app is loaded and bootstrapped, the AngularJS routes match the necessary URL to render their content, and your application continues to run with both AngularJS and Angular frameworks.</p><h2 id="using-the-unified-angular-location-service" translation-result="on">使用统一的 Angular 位置服务（Location）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-the-unified-angular-location-service"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="using-the-unified-angular-location-service">Using the Unified Angular Location Service<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-the-unified-angular-location-service"><i class="material-icons">link</i></a></h2><p translation-result="on">在 AngularJS 中，<a href="https://docs.angularjs.org/api/ng/service/$location">$location 服务</a>会处理所有路由配置和导航工作，并对各个 URL 进行编码和解码、重定向、以及与浏览器 API 交互。 Angular 在所有这些任务中都使用了自己的底层服务 <code><a href="api/common/Location" class="code-anchor">Location</a></code>。</p><p translation-origin="off">In AngularJS, the <a href="https://docs.angularjs.org/api/ng/service/$location">$location service</a> handles all routing configuration and navigation, encoding and decoding of URLS, redirects, and interactions with browser APIs. Angular uses its own underlying <code><a href="api/common/Location" class="code-anchor">Location</a></code> service for all of these tasks.</p><p translation-result="on">当你从 AngularJS 迁移到 Angular 时，你会希望把尽可能多的责任移交给 Angular，以便利用新的 API。为了帮你完成这种转换，Angular 提供了 <code><a href="api/common/upgrade/LocationUpgradeModule" class="code-anchor">LocationUpgradeModule</a></code>。该模块支持<em>统一</em>位置服务，可以把 AngularJS 中 <code>$location</code> 服务的职责转给 Angular 的 <code><a href="api/common/Location" class="code-anchor">Location</a></code> 服务。</p><p translation-origin="off">When you migrate from AngularJS to Angular you will want to move as much responsibility as possible to Angular, so that you can take advantage of new APIs. To help with the transition, Angular provides the <code><a href="api/common/upgrade/LocationUpgradeModule" class="code-anchor">LocationUpgradeModule</a></code>. This module enables a <em>unified</em> location service that shifts responsibilities from the AngularJS <code>$location</code> service to the Angular <code><a href="api/common/Location" class="code-anchor">Location</a></code> service.</p><p translation-result="on">要使用<code><a href="api/common/upgrade/LocationUpgradeModule" class="code-anchor">LocationUpgradeModule</a></code>，就会从 <code>@angular/common/upgrade</code> 中导入此符号，并使用静态方法 <code><a href="api/common/upgrade/LocationUpgradeModule#config" class="code-anchor">LocationUpgradeModule.config()</a></code> 把它添加到你的 <code>AppModule</code> 导入表（<code>imports</code>）中。</p><p translation-origin="off">To use the <code><a href="api/common/upgrade/LocationUpgradeModule" class="code-anchor">LocationUpgradeModule</a></code>, import the symbol from <code>@angular/common/upgrade</code> and add it to your <code>AppModule</code> imports using the static <code><a href="api/common/upgrade/LocationUpgradeModule#config" class="code-anchor">LocationUpgradeModule.config()</a></code> method.</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">// <a href="api/common/Plural#Other" class="code-anchor">Other</a> imports ... import { <a href="api/common/upgrade/LocationUpgradeModule" class="code-anchor">LocationUpgradeModule</a> } from '@angular/common/upgrade'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ // <a href="api/common/Plural#Other" class="code-anchor">Other</a> <a href="api/core/NgModule" class="code-anchor">NgModule</a> imports... LocationUpgradeModule.config() ] }) export class AppModule {}</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// </span><a href="api/common/Plural#Other" class="code-anchor"><span class="com">Other</span></a><span class="com"> imports ...</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/upgrade/LocationUpgradeModule" class="code-anchor"><span class="typ">LocationUpgradeModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> from </span><span class="str">'@angular/common/upgrade'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="com">// </span><a href="api/common/Plural#Other" class="code-anchor"><span class="com">Other</span></a><span class="com"> </span><a href="api/core/NgModule" class="code-anchor"><span class="com">NgModule</span></a><span class="com"> imports...</span><span class="pln">
    </span><span class="typ">LocationUpgradeModule</span><span class="pun">.</span><span class="pln">config</span><span class="pun">()</span><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{}</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code><a href="api/common/upgrade/LocationUpgradeModule#config" class="code-anchor">LocationUpgradeModule.config()</a></code> 方法接受一个配置对象，该对象的 <code>useHash</code> 为 <code><a href="api/common/LocationStrategy" class="code-anchor">LocationStrategy</a></code>，<code><a href="api/common/upgrade/LocationUpgradeConfig#hashPrefix" class="code-anchor">hashPrefix</a></code> 为 URL 前缀。</p><p translation-origin="off">The <code><a href="api/common/upgrade/LocationUpgradeModule#config" class="code-anchor">LocationUpgradeModule.config()</a></code> method accepts a configuration object that allows you to configure options including the <code><a href="api/common/LocationStrategy" class="code-anchor">LocationStrategy</a></code> with the <code>useHash</code> property, and the URL prefix with the <code><a href="api/common/upgrade/LocationUpgradeConfig#hashPrefix" class="code-anchor">hashPrefix</a></code> property.</p><p translation-result="on"><code>useHash</code> 属性默认为 <code>false</code>，而 <code><a href="api/common/upgrade/LocationUpgradeConfig#hashPrefix" class="code-anchor">hashPrefix</a></code> 默认为空 <code>string</code>。传递配置对象可以覆盖默认值。</p><p translation-origin="off">The <code>useHash</code> property defaults to <code>false</code>, and the <code><a href="api/common/upgrade/LocationUpgradeConfig#hashPrefix" class="code-anchor">hashPrefix</a></code> defaults to an empty <code>string</code>. Pass the configuration object to override the defaults.</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">LocationUpgradeModule.config({ useHash: true, <a href="api/common/upgrade/LocationUpgradeConfig#hashPrefix" class="code-anchor">hashPrefix</a>: '!' })</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">LocationUpgradeModule</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span><span class="pln">
  useHash</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
  </span><a href="api/common/upgrade/LocationUpgradeConfig#hashPrefix" class="code-anchor"><span class="pln">hashPrefix</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'!'</span><span class="pln">
</span><span class="pun">})</span></code>
    </pre></aio-code></code-example><div class="alert is-important"><p translation-result="on"><strong>注意：</strong>有关 <code><a href="api/common/upgrade/LocationUpgradeModule#config" class="code-anchor">LocationUpgradeModule.config()</a></code> 方法的更多可用配置项，请参阅 <code><a href="api/common/upgrade/LocationUpgradeConfig" class="code-anchor">LocationUpgradeConfig</a></code>。</p><p translation-origin="off"><strong>Note:</strong> See the <code><a href="api/common/upgrade/LocationUpgradeConfig" class="code-anchor">LocationUpgradeConfig</a></code> for more configuration options available to the <code><a href="api/common/upgrade/LocationUpgradeModule#config" class="code-anchor">LocationUpgradeModule.config()</a></code> method.</p></div><p translation-result="on">这会为 AngularJS 中的 <code>$location</code> 提供商注册一个替代品。一旦注册成功，导航过程中所有由 AngularJS 触发的导航、路由广播消息以及任何必需的变更检测周期都会改由 Angular 进行处理。这样，你就可以通过这个唯一的途径在此混合应用的两个框架间进行导航了。</p><p translation-origin="off">This registers a drop-in replacement for the <code>$location</code> provider in AngularJS. Once registered, all navigation, routing broadcast messages, and any necessary digest cycles in AngularJS triggered during navigation are handled by Angular. This gives you a single way to navigate within both sides of your hybrid application consistently.</p><p translation-result="on">要想在 AngularJS 中使用 <code>$location</code> 服务作为提供商，你需要使用一个工厂提供商来降级 <code><a href="api/common/upgrade/$locationShim" class="code-anchor">$locationShim</a></code>。</p><p translation-origin="off">For usage of the <code>$location</code> service as a provider in AngularJS, you need to downgrade the <code><a href="api/common/upgrade/$locationShim" class="code-anchor">$locationShim</a></code> using a factory provider.</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">// <a href="api/common/Plural#Other" class="code-anchor">Other</a> imports ... import { $locationShim } from '@angular/common/upgrade'; import { <a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; angular.module('myHybridApp', [...]) .factory('$location', <a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a>($locationShim));</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// </span><a href="api/common/Plural#Other" class="code-anchor"><span class="com">Other</span></a><span class="com"> imports ...</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $locationShim </span><span class="pun">}</span><span class="pln"> from </span><span class="str">'@angular/common/upgrade'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/downgradeInjectable" class="code-anchor"><span class="pln">downgradeInjectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> from </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

angular</span><span class="pun">.</span><span class="pln">module</span><span class="pun">(</span><span class="str">'myHybridApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[...])</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">factory</span><span class="pun">(</span><span class="str">'$location'</span><span class="pun">,</span><span class="pln"> </span><a href="api/upgrade/static/downgradeInjectable" class="code-anchor"><span class="pln">downgradeInjectable</span></a><span class="pun">(</span><span class="pln">$locationShim</span><span class="pun">));</span></code>
    </pre></aio-code></code-example><p translation-result="on">一旦引入了 Angular 路由器，你只要使用 Angular 路由器就可以通过统一位置服务来触发导航了，同时，你仍然可以通过 AngularJS 和 Angular 进行导航。</p><p translation-origin="off">Once you introduce the Angular Router, using the Angular Router triggers navigations through the unified location service, still providing a single source for navigating with AngularJS and Angular.</p><h2 id="using-ahead-of-time-compilation-with-hybrid-apps" translation-result="on">在混合式应用中使用 AOT 编译<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-ahead-of-time-compilation-with-hybrid-apps"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="using-ahead-of-time-compilation-with-hybrid-apps">Using Ahead-of-time compilation with hybrid apps<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#using-ahead-of-time-compilation-with-hybrid-apps"><i class="material-icons">link</i></a></h2><p translation-result="on">你也可以其它 Angular 应用一样在混合式应用中发挥 AOT 编译的优势。 对混合式应用的设置过程和<a href="guide/aot-compiler">预编译</a>章节中所讲的几乎完全一样，不同点在于 <code>index.html</code> 和 <code>main-aot.ts</code> 中。</p><p translation-origin="off">You can take advantage of Ahead-of-time (AOT) compilation on hybrid apps just like on any other Angular application. The setup for a hybrid app is mostly the same as described in <a href="guide/aot-compiler">the Ahead-of-time Compilation chapter</a> save for differences in <code>index.html</code> and <code>main-aot.ts</code></p><p translation-result="on"><code>index.html</code> 仍然需要 script 标签来加载 AngularJS 的文件，因此供 AOT 编译的 <code>index.html</code> 也需要加载那些文件。 复制它们的简单方案是把它们全都添加到 <code>copy-dist-files.js</code> 文件中。</p><p translation-origin="off">The <code>index.html</code> will likely have script tags loading AngularJS files, so the <code>index.html</code> for AOT must also load those files. An easy way to copy them is by adding each to the <code>copy-dist-files.js</code> file.</p><p translation-result="on">你还要使用所生成的 <code>AppModuleFactory</code> 而不是原来的 <code>AppModule</code> 来引导一个混合式应用：</p><p translation-origin="off">You'll need to use the generated <code>AppModuleFactory</code>, instead of the original <code>AppModule</code> to bootstrap the hybrid app:</p><code-example path="upgrade-phonecat-2-hybrid/app/main-aot.ts" header="app/main-aot.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/platform-browser/platformBrowser" class="code-anchor">platformBrowser</a> } from '@angular/platform-browser'; import { AppModuleNgFactory } from './app.module.ngfactory'; <a href="api/platform-browser/platformBrowser" class="code-anchor">platformBrowser</a>().bootstrapModuleFactory(AppModuleNgFactory);</div><header class="ng-star-inserted">app/main-aot.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/main-aot.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/platformBrowser" class="code-anchor"><span class="pln">platformBrowser</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppModuleNgFactory</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.module.ngfactory'</span><span class="pun">;</span><span class="pln">

</span><a href="api/platform-browser/platformBrowser" class="code-anchor"><span class="pln">platformBrowser</span></a><span class="pun">().</span><span class="pln">bootstrapModuleFactory</span><span class="pun">(</span><span class="typ">AppModuleNgFactory</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">这就是你为获取 Angular 应用的 AOT 优势所要做的一切。</p><p translation-origin="off">And that's all you need do to get the full benefit of AOT for Angular apps!</p><h2 id="phonecat-upgrade-tutorial" translation-result="on">PhoneCat 升级教程<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#phonecat-upgrade-tutorial"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="phonecat-upgrade-tutorial">PhoneCat Upgrade Tutorial<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#phonecat-upgrade-tutorial"><i class="material-icons">link</i></a></h2><p translation-result="on">在本节和下节中，你将看一个完整的例子，它使用 <code>upgrade</code> 模块准备和升级了一个应用程序。 该应用就是来自<a href="https://docs.angularjs.org/tutorial">原 AngularJS 教程</a>中的<a href="https://github.com/angular/angular-phonecat">Angular PhoneCat</a>。 那是我们很多人当初开始 Angular 探险之旅的地方。 现在，你会看到如何把该应用带入 Angular 的美丽新世界。</p><p translation-origin="off">In this section, you'll learn to prepare and upgrade an application with <code>ngUpgrade</code>. The example app is <a href="https://github.com/angular/angular-phonecat">Angular PhoneCat</a> from <a href="https://docs.angularjs.org/tutorial">the original AngularJS tutorial</a>, which is where many of us began our Angular adventures. Now you'll see how to bring that application to the brave new world of Angular.</p><p translation-result="on">这期间，你将学到如何在实践中应用<a href="guide/upgrade#preparation">准备指南</a>中列出的那些重点步骤： 你先让该应用向 Angular 看齐，然后为它引入 SystemJS 模块加载器和 TypeScript。</p><p translation-origin="off">During the process you'll learn how to apply the steps outlined in the <a href="guide/upgrade#preparation">preparation guide</a>. You'll align the application with Angular and also start writing in TypeScript.</p><p translation-result="on">要跟随本教程，请先把<a href="https://github.com/angular/angular-phonecat">angular-phonecat</a>仓库克隆到本地，并应用这些步骤。</p><p translation-origin="off">To follow along with the tutorial, clone the <a href="https://github.com/angular/angular-phonecat">angular-phonecat</a> repository and apply the steps as you go.</p><p translation-result="on">在项目结构方面，工作的起点是这样的：</p><p translation-origin="off">In terms of project structure, this is where the work begins:</p><div class="filetree"><div class="file"><p>angular-phonecat</p></div><div class="children"><div class="file"><p>bower.json</p></div><div class="file"><p>karma.conf.js</p></div><div class="file"><p>package.json</p></div><div class="file"><p>app</p></div><div class="children"><div class="file"><p>core</p></div><div class="children"><div class="file"><p>checkmark</p></div><div class="children"><div class="file"><p>checkmark.filter.js</p></div><div class="file"><p>checkmark.filter.spec.js</p></div></div><div class="file"><p>phone</p></div><div class="children"><div class="file"><p>phone.module.js</p></div><div class="file"><p>phone.service.js</p></div><div class="file"><p>phone.service.spec.js</p></div></div><div class="file"><p>core.module.js</p></div></div><div class="file"><p>phone-detail</p></div><div class="children"><div class="file"><p>phone-detail.component.js</p></div><div class="file"><p>phone-detail.component.spec.js</p></div><div class="file"><p>phone-detail.module.js</p></div><div class="file"><p>phone-detail.template.html</p></div></div><div class="file"><p>phone-list</p></div><div class="children"><div class="file"><p>phone-list.component.js</p></div><div class="file"><p>phone-list.component.spec.js</p></div><div class="file"><p>phone-list.module.js</p></div><div class="file"><p>phone-list.template.html</p></div></div><div class="file"><p>img</p></div><div class="children"><div class="file"><p>...</p></div></div><div class="file"><p>phones</p></div><div class="children"><div class="file"><p>...</p></div></div><div class="file"><p>app.animations.js</p></div><div class="file"><p>app.config.js</p></div><div class="file"><p>app.css</p></div><div class="file"><p>app.module.js</p></div><div class="file"><p>index.html</p></div></div><div class="file"><p>e2e-tests</p></div><div class="children"><div class="file"><p>protractor-conf.js</p></div><div class="file"><p>scenarios.js</p></div></div></div></div><p translation-result="on">这确实是一个很好地起点。这些代码使用了 AngularJS 1.5 的组件 API，并遵循了 <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md">AngularJS 风格指南</a>进行组织， 在成功升级之前，这是一个很重要的<a href="guide/upgrade#follow-the-angular-styleguide">准备步骤</a>。</p><p translation-origin="off">This is actually a pretty good starting point. The code uses the AngularJS 1.5 component API and the organization follows the <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md">AngularJS Style Guide</a>, which is an important <a href="guide/upgrade#follow-the-angular-styleguide">preparation step</a> before a successful upgrade.</p><ul><li><p translation-result="on">每个组件、服务和过滤器都在它自己的源文件中 —— 就像<a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility">单一规则</a>所要求的。</p><p translation-origin="off">Each component, service, and filter is in its own source file, as per the <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility">Rule of 1</a>.</p></li><li><p translation-result="on"> <code>core</code>、<code>phone-detail</code> 和 <code>phone-list</code> 模块都在它们自己的子目录中。那些子目录除了包含 HTML 模板之外，还包含 JavaScript 代码，它们共同完成一个特性。 这是<a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y152">按特性分目录的结构</a> 和<a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity">模块化</a>规则所要求的。</p><p translation-origin="off">The <code>core</code>, <code>phone-detail</code>, and <code>phone-list</code> modules are each in their own subdirectory. Those subdirectories contain the JavaScript code as well as the HTML templates that go with each particular feature. This is in line with the <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure">Folders-by-Feature Structure</a> and <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity">Modularity</a> rules.</p></li><li><p translation-result="on">单元测试都和应用代码在一起，它们很容易找到。就像规则 <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#organizing-tests">组织测试文件</a>中要求的那样。</p><p translation-origin="off">Unit tests are located side-by-side with application code where they are easily found, as described in the rules for <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#organizing-tests">Organizing Tests</a>.</p></li></ul><h3 id="switching-to-typescript" translation-result="on">切换到 TypeScript<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#switching-to-typescript"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="switching-to-typescript">Switching to TypeScript<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#switching-to-typescript"><i class="material-icons">link</i></a></h3><p translation-result="on">因为你将使用 TypeScript 编写 Angular 的代码，所以在开始升级之前，先要把 TypeScript 的编译器设置好。</p><p translation-origin="off">Since you're going to be writing Angular code in TypeScript, it makes sense to bring in the TypeScript compiler even before you begin upgrading.</p><p translation-result="on">你还将开始逐步淘汰 Bower 包管理器，换成 NPM。后面你将使用 NPM 来安装新的依赖包，并最终从项目中移除 Bower。</p><p translation-origin="off">You'll also start to gradually phase out the Bower package manager in favor of NPM, installing all new dependencies using NPM, and eventually removing Bower from the project.</p><p translation-result="on">先把 TypeScript 包安装到项目中。</p><p translation-origin="off">Begin by installing TypeScript to the project.</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">npm i typescript --save-dev</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">npm i typescript </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev</span></code>
    </pre></aio-code></code-example><p translation-result="on">还要为那些没有自带类型信息的库（比如 AngularJS 和 Jasmine）安装类型定义文件。</p><p translation-origin="off">Install type definitions for the existing libraries that you're using but that don't come with prepackaged types: AngularJS and the Jasmine unit test framework.</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">npm install @types/jasmine @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">npm install </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">jasmine </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">animate </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">cookies </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">mocks </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">resource </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">route </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">sanitize </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev</span></code>
    </pre></aio-code></code-example><p translation-result="on">你还应该要往项目目录下添加一个 <code>tsconfig.json</code> 文件， 就像在 <a href="guide/typescript-configuration">TypeScript 配置</a>中讲过的那样。 <code>tsconfig.json</code> 文件会告诉 TypeScript 编译器如何把 TypeScript 文件转成 ES5 代码，并打包进 CommonJS 模块中。</p><p translation-origin="off">You should also configure the TypeScript compiler with a <code>tsconfig.json</code> in the project directory as described in the <a href="guide/typescript-configuration">TypeScript Configuration</a> guide. The <code>tsconfig.json</code> file tells the TypeScript compiler how to turn your TypeScript files into ES5 code bundled into CommonJS modules.</p><p translation-result="on">最后，你应该把下列 npm 脚本添加到 <code>package.json</code> 中，用于把 TypeScript 文件编译成 JavaScript （根据 <code>tsconfig.json</code> 的配置）：</p><p translation-origin="off">Finally, you should add some npm scripts in <code>package.json</code> to compile the TypeScript files to JavaScript (based on the <code>tsconfig.json</code> configuration file):</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">"scripts": { "tsc": "tsc", "tsc:w": "tsc -w", ...</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"scripts"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"tsc"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"tsc"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"tsc:w"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"tsc -w"</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">...</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在，从命令行中用监视模式启动 TypeScript 编译器：</p><p translation-origin="off">Now launch the TypeScript compiler from the command line in watch mode:</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">npm run tsc:w</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">npm run tsc</span><span class="pun">:</span><span class="pln">w</span></code>
    </pre></aio-code></code-example><p translation-result="on">让这个进程一直在后台运行，监听任何变化并自动重新编译。</p><p translation-origin="off">Keep this process running in the background, watching and recompiling as you make changes.</p><p translation-result="on">接下来，把 JavaScript 文件转换成 TypeScript 文件。 由于 TypeScript 是 ECMAScript 2015 的一个超集，而 ES2015 又是 ECMAScript 5 的超集，所以你可以简单的把文件的扩展名从 <code>.js</code> 换成 <code>.ts</code>， 它们还是会像以前一样工作。由于 TypeScript 编译器仍在运行，它会为每一个 <code>.ts</code> 文件生成对应的 <code>.js</code> 文件，而真正运行的是编译后的 <code>.js</code> 文件。 如果你用 <code>npm start</code> 开启了本项目的 HTTP 服务器，你会在浏览器中看到一个功能完好的应用。</p><p translation-origin="off">Next, convert your current JavaScript files into TypeScript. Since TypeScript is a super-set of ECMAScript 2015, which in turn is a super-set of ECMAScript 5, you can simply switch the file extensions from <code>.js</code> to <code>.ts</code> and everything will work just like it did before. As the TypeScript compiler runs, it emits the corresponding <code>.js</code> file for every <code>.ts</code> file and the compiled JavaScript is what actually gets executed. If you start the project HTTP server with <code>npm start</code>, you should see the fully functional application in your browser.</p><p translation-result="on">有了 TypeScript，你就可以从它的一些特性中获益了。此语言可以为 AngularJS 应用提供很多价值。</p><p translation-origin="off">Now that you have TypeScript though, you can start benefiting from some of its features. There's a lot of value the language can provide to AngularJS applications.</p><p translation-result="on">首先，TypeScript 是一个 ES2015 的超集。任何以前用 ES5 写的程序(就像 PhoneCat 范例)都可以开始通过 TypeScript 纳入那些添加到 ES2015 中的新特性。 这包括 <code>let</code>、<code>const</code>、箭头函数、函数默认参数以及解构(destructure)赋值。</p><p translation-origin="off">For one thing, TypeScript is a superset of ES2015. Any app that has previously been written in ES5 - like the PhoneCat example has - can with TypeScript start incorporating all of the JavaScript features that are new to ES2015. These include things like <code>let</code>s and <code>const</code>s, arrow functions, default function parameters, and destructuring assignments.</p><p translation-result="on">你能做的另一件事就是把<em>类型安全</em>添加到代码中。这实际上已经部分完成了，因为你已经安装了 AngularJS 的类型定义。 TypeScript 会帮你检查是否正确调用了 AngularJS 的 API，—— 比如往 Angular 模块中注册组件。</p><p translation-origin="off">Another thing you can do is start adding <em>type safety</em> to your code. This has actually partially already happened because of the AngularJS typings you installed. TypeScript are checking that you are calling AngularJS APIs correctly when you do things like register components to Angular modules.</p><p translation-result="on">你还能开始把<em>类型注解</em>添加到自己的代码中，来从 TypeScript 的类型系统中获得更多帮助。 比如，你可以给 <code>checkmark</code> 过滤器加上注解，表明它期待一个 <code>boolean</code> 类型的参数。 这可以更清楚的表明此过滤器打算做什么</p><p translation-origin="off">But you can also start adding <em>type annotations</em> to get even more out of TypeScript's type system. For instance, you can annotate the checkmark filter so that it explicitly expects booleans as arguments. This makes it clearer what the filter is supposed to do.</p><code-example path="upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts" header="app/core/checkmark/checkmark.filter.ts" ng-version="9.0.0-rc.11"><div style="display:none">angular. module('core'). filter('checkmark', function() { return function(input: boolean) { return input ? '\u2713' : '\u2718'; }; });</div><header class="ng-star-inserted">app/core/checkmark/checkmark.filter.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/checkmark/checkmark.filter.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">angular</span><span class="pun">.</span><span class="pln">
  </span><span class="kwd">module</span><span class="pun">(</span><span class="str">'core'</span><span class="pun">).</span><span class="pln">
  filter</span><span class="pun">(</span><span class="str">'checkmark'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">input</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">boolean</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">return</span><span class="pln"> input </span><span class="pun">?</span><span class="pln"> </span><span class="str">'\u2713'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'\u2718'</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">};</span><span class="pln">
  </span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">在 <code>Phone</code> 服务中，你可以明确的把 <code>$resource</code> 服务声明为 <code>angular.resource.IResourceService</code>，一个 AngularJS 类型定义提供的类型。</p><p translation-origin="off">In the <code>Phone</code> service, you can explicitly annotate the <code>$resource</code> service dependency as an <code>angular.resource.IResourceService</code> - a type defined by the AngularJS typings.</p><code-example path="upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts" header="app/core/phone/phone.service.ts" ng-version="9.0.0-rc.11"><div style="display:none">angular. module('core.phone'). factory('Phone', ['$resource', function($resource: angular.resource.IResourceService) { return $resource('phones/:phoneId.json', {}, { <a href="api/animations/query" class="code-anchor">query</a>: { method: 'GET', params: {phoneId: 'phones'}, isArray: true } }); } ]);</div><header class="ng-star-inserted">app/core/phone/phone.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/phone/phone.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">angular</span><span class="pun">.</span><span class="pln">
  </span><span class="kwd">module</span><span class="pun">(</span><span class="str">'core.phone'</span><span class="pun">).</span><span class="pln">
  factory</span><span class="pun">(</span><span class="str">'Phone'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'$resource'</span><span class="pun">,</span><span class="pln">
    </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$resource</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">resource</span><span class="pun">.</span><span class="typ">IResourceService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">return</span><span class="pln"> $resource</span><span class="pun">(</span><span class="str">'phones/:phoneId.json'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><a href="api/animations/query" class="code-anchor"><span class="pln">query</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          method</span><span class="pun">:</span><span class="pln"> </span><span class="str">'GET'</span><span class="pun">,</span><span class="pln">
          </span><span class="kwd">params</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">phoneId</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phones'</span><span class="pun">},</span><span class="pln">
          isArray</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
      </span><span class="pun">});</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">]);</span></code>
    </pre></aio-code></code-example><p translation-result="on">你可以在应用的路由配置中使用同样的技巧，那里你用到了 location 和 route 服务。 一旦为它们提供了类型信息，TypeScript 就能检查你是否在用类型的正确参数来调用它们了。</p><p translation-origin="off">You can apply the same trick to the application's route configuration file in <code>app.config.ts</code>, where you are using the location and route services. By annotating them accordingly TypeScript can verify you're calling their APIs with the correct kinds of arguments.</p><code-example path="upgrade-phonecat-1-typescript/app/app.config.ts" header="app/app.config.ts" ng-version="9.0.0-rc.11"><div style="display:none">angular. module('phonecatApp'). <a href="api/router/Router#config" class="code-anchor">config</a>(['$locationProvider', '$routeProvider', function <a href="api/router/Router#config" class="code-anchor">config</a>($locationProvider: angular.ILocationProvider, $routeProvider: angular.route.IRouteProvider) { $locationProvider.hashPrefix('!'); $routeProvider. when('/phones', { template: '&lt;phone-list&gt;&lt;/phone-list&gt;' }). when('/phones/:phoneId', { template: '&lt;phone-detail&gt;&lt;/phone-detail&gt;' }). otherwise('/phones'); } ]);</div><header class="ng-star-inserted">app/app.config.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/app.config.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">angular</span><span class="pun">.</span><span class="pln">
  </span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phonecatApp'</span><span class="pun">).</span><span class="pln">
  </span><a href="api/router/Router#config" class="code-anchor"><span class="pln">config</span></a><span class="pun">([</span><span class="str">'$locationProvider'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'$routeProvider'</span><span class="pun">,</span><span class="pln">
    </span><span class="kwd">function</span><span class="pln"> </span><a href="api/router/Router#config" class="code-anchor"><span class="pln">config</span></a><span class="pun">(</span><span class="pln">$locationProvider</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">ILocationProvider</span><span class="pun">,</span><span class="pln">
                    $routeProvider</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">route</span><span class="pun">.</span><span class="typ">IRouteProvider</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      $locationProvider</span><span class="pun">.</span><span class="pln">hashPrefix</span><span class="pun">(</span><span class="str">'!'</span><span class="pun">);</span><span class="pln">

      $routeProvider</span><span class="pun">.</span><span class="pln">
        </span><span class="kwd">when</span><span class="pun">(</span><span class="str">'/phones'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;phone-list&gt;&lt;/phone-list&gt;'</span><span class="pln">
        </span><span class="pun">}).</span><span class="pln">
        </span><span class="kwd">when</span><span class="pun">(</span><span class="str">'/phones/:phoneId'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;phone-detail&gt;&lt;/phone-detail&gt;'</span><span class="pln">
        </span><span class="pun">}).</span><span class="pln">
        otherwise</span><span class="pun">(</span><span class="str">'/phones'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">]);</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">你用安装的这个<a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/angularjs">AngularJS.x 类型定义文件</a> 并不是由 Angular 开发组维护的，但它也已经足够全面了。借助这些类型定义的帮助，它可以为 AngularJS.x 程序加上全面的类型注解。</p><p translation-origin="off">The <a href="https://www.npmjs.com/package/@types/angular">AngularJS 1.x type definitions</a> you installed are not officially maintained by the Angular team, but are quite comprehensive. It is possible to make an AngularJS 1.x application fully type-annotated with the help of these definitions.</p><p translation-result="on">如果你想这么做，就在 <code>tsconfig.json</code> 中启用 <code>noImplicitAny</code> 配置项。 这样，如果遇到什么还没有类型注解的代码，TypeScript 编译器就会显示一个警告。 你可以用它作为指南，告诉你现在与一个完全类型化的项目距离还有多远。</p><p translation-origin="off">If this is something you wanted to do, it would be a good idea to enable the <code>noImplicitAny</code> configuration option in <code>tsconfig.json</code>. This would cause the TypeScript compiler to display a warning when there's any code that does not yet have type annotations. You could use it as a guide to inform us about how close you are to having a fully annotated project.</p></div><p translation-result="on">你能用的另一个 TypeScript 特性是<em>类</em>。具体来讲，你可以把控制器转换成类。 这种方式下，你离成为 Angular 组件类就又近了一步，它会令你的升级之路变得更简单。</p><p translation-origin="off">Another TypeScript feature you can make use of is <em>classes</em>. In particular, you can turn component controllers into classes. That way they'll be a step closer to becoming Angular component classes, which will make life easier once you upgrade.</p><p translation-result="on">AngularJS 期望控制器是一个构造函数。这实际上就是 ES2015/TypeScript 中的类， 这也就意味着只要你把一个类注册为组件控制器，AngularJS 就会愉快的使用它。</p><p translation-origin="off">AngularJS expects controllers to be constructor functions. That's exactly what ES2015/TypeScript classes are under the hood, so that means you can just plug in a class as a component controller and AngularJS will happily use it.</p><p translation-result="on">新的“电话列表(phone list)”组件控制器类是这样的：</p><p translation-origin="off">Here's what the new class for the phone list component controller looks like:</p><code-example path="upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts" header="app/phone-list/phone-list.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">class PhoneListController { phones: any[]; orderProp: string; <a href="api/animations/query" class="code-anchor">query</a>: string; <a href="api/upgrade/static" class="code-anchor">static</a> $inject = ['Phone']; constructor(Phone: any) { this.phones = Phone.query(); this.orderProp = 'age'; } } angular. module('phoneList'). component('phoneList', { <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: 'phone-list/phone-list.template.html', controller: PhoneListController });</div><header class="ng-star-inserted">app/phone-list/phone-list.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><span class="typ">PhoneListController</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  phones</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[];</span><span class="pln">
  orderProp</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
  </span><a href="api/animations/query" class="code-anchor"><span class="pln">query</span></a><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">

  </span><a href="api/upgrade/static" class="code-anchor"><span class="kwd">static</span></a><span class="pln"> $inject </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'Phone'</span><span class="pun">];</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="typ">Phone</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">phones </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">.</span><span class="pln">query</span><span class="pun">();</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">orderProp </span><span class="pun">=</span><span class="pln"> </span><span class="str">'age'</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span><span class="pln">

angular</span><span class="pun">.</span><span class="pln">
  </span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phoneList'</span><span class="pun">).</span><span class="pln">
  component</span><span class="pun">(</span><span class="str">'phoneList'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'phone-list/phone-list.template.html'</span><span class="pun">,</span><span class="pln">
    controller</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneListController</span><span class="pln">
  </span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">以前在控制器函数中实现的一切，现在都改由类的构造函数来实现了。类型注入注解通过静态属性 <code>$inject</code> 被附加到了类上。在运行时，它们变成了 <code>PhoneListController.$inject</code>。</p><p translation-origin="off">What was previously done in the controller function is now done in the class constructor function. The dependency injection annotations are attached to the class using a static property <code>$inject</code>. At runtime this becomes the <code>PhoneListController.$inject</code> property.</p><p translation-result="on">该类还声明了另外三个成员：电话列表、当前排序键的名字和搜索条件。 这些东西你以前就加到了控制器上，只是从来没有在任何地方显式定义过它们。最后一个成员从未真正在 TypeScript 代码中用过， 因为它只是在模板中被引用过。但为了清晰起见，你还是应该定义出此控制器应有的所有成员。</p><p translation-origin="off">The class additionally declares three members: The array of phones, the name of the current sort key, and the search query. These are all things you have already been attaching to the controller but that weren't explicitly declared anywhere. The last one of these isn't actually used in the TypeScript code since it's only referred to in the template, but for the sake of clarity you should define all of the controller members.</p><p translation-result="on">在电话详情控制器中，你有两个成员：一个是用户正在查看的电话，另一个是正在显示的图像：</p><p translation-origin="off">In the Phone detail controller, you'll have two members: One for the phone that the user is looking at and another for the URL of the currently displayed image:</p><code-example path="upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts" header="app/phone-detail/phone-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">class PhoneDetailController { phone: any; mainImageUrl: string; <a href="api/upgrade/static" class="code-anchor">static</a> $inject = ['$routeParams', 'Phone']; constructor($routeParams: angular.route.IRouteParamsService, Phone: any) { let phoneId = $routeParams['phoneId']; this.phone = Phone.get({phoneId}, (phone: any) =&gt; { this.setImage(phone.images[0]); }); } setImage(imageUrl: string) { this.mainImageUrl = imageUrl; } } angular. module('phoneDetail'). component('phoneDetail', { <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: 'phone-detail/phone-detail.template.html', controller: PhoneDetailController });</div><header class="ng-star-inserted">app/phone-detail/phone-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-detail/phone-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><span class="typ">PhoneDetailController</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  phone</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">;</span><span class="pln">
  mainImageUrl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">

  </span><a href="api/upgrade/static" class="code-anchor"><span class="kwd">static</span></a><span class="pln"> $inject </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'$routeParams'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Phone'</span><span class="pun">];</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">$routeParams</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">route</span><span class="pun">.</span><span class="typ">IRouteParamsService</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> phoneId </span><span class="pun">=</span><span class="pln"> $routeParams</span><span class="pun">[</span><span class="str">'phoneId'</span><span class="pun">];</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">phone </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">({</span><span class="pln">phoneId</span><span class="pun">},</span><span class="pln"> </span><span class="pun">(</span><span class="pln">phone</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">setImage</span><span class="pun">(</span><span class="pln">phone</span><span class="pun">.</span><span class="pln">images</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  setImage</span><span class="pun">(</span><span class="pln">imageUrl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">mainImageUrl </span><span class="pun">=</span><span class="pln"> imageUrl</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

angular</span><span class="pun">.</span><span class="pln">
  </span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phoneDetail'</span><span class="pun">).</span><span class="pln">
  component</span><span class="pun">(</span><span class="str">'phoneDetail'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'phone-detail/phone-detail.template.html'</span><span class="pun">,</span><span class="pln">
    controller</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneDetailController</span><span class="pln">
  </span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">这已经让你的控制器代码看起来更像 Angular 了。你的准备工作做好了，可以引进 Angular 到项目中了。</p><p translation-origin="off">This makes the controller code look a lot more like Angular already. You're all set to actually introduce Angular into the project.</p><p translation-result="on">如果项目中有任何 AngularJS 的服务，它们也是转换成类的优秀候选人，像控制器一样，它们也是构造函数。 但是在本项目中，你只有一个 <code>Phone</code> 工厂，这有点特别，因为它是一个 <code>ngResource</code> 工厂。 所以你不会在准备阶段中处理它，而是在下一节中直接把它转换成 Angular 服务。</p><p translation-origin="off">If you had any AngularJS services in the project, those would also be a good candidate for converting to classes, since like controllers, they're also constructor functions. But you only have the <code>Phone</code> factory in this project, and that's a bit special since it's an <code>ngResource</code> factory. So you won't be doing anything to it in the preparation stage. You'll instead turn it directly into an Angular service.</p><h3 id="installing-angular" translation-result="on">安装 Angular<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#installing-angular"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="installing-angular">Installing Angular<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#installing-angular"><i class="material-icons">link</i></a></h3><p translation-result="on">准备工作做完了，接下来就开始把 PhoneCat 升级到 Angular。 你将在 Angular<a href="guide/upgrade#upgrading-with-ngupgrade">升级模块</a>的帮助下增量式的完成此项工作。 做完这些之后，就能把 AngularJS 从项目中完全移除了，但其中的关键是在不破坏此程序的前提下一小块一小块的完成它。</p><p translation-origin="off">Having completed the preparation work, get going with the Angular upgrade of PhoneCat. You'll do this incrementally with the help of <a href="guide/upgrade#upgrading-with-ngupgrade">ngUpgrade</a> that comes with Angular. By the time you're done, you'll be able to remove AngularJS from the project completely, but the key is to do this piece by piece without breaking the application.</p><div class="alert is-important"><p translation-result="on">该项目还包含一些动画，在此指南的当前版本你先不升级它，请到 <a href="guide/animations">Angular 动画</a>中进一步学习。</p><p translation-origin="off">The project also contains some animations. You won't upgrade them in this version of the guide. Turn to the <a href="guide/animations">Angular animations</a> guide to learn about that.</p></div><p translation-result="on">用 SystemJS 模块加载器把 Angular 安装到项目中。 看看<a href="guide/upgrade-setup">升级的准备工作</a>中的指南，并从那里获得如下配置：</p><p translation-origin="off">Install Angular into the project, along with the SystemJS module loader. Take a look at the results of the <a href="guide/upgrade-setup">upgrade setup instructions</a> and get the following configurations from there:</p><ul><li><p translation-result="on">把 Angular 和其它新依赖添加到 <code>package.json</code> 中</p><p translation-origin="off">Add Angular and the other new dependencies to <code>package.json</code></p></li><li><p translation-result="on">把 SystemJS 的配置文件 <code>systemjs.config.js</code> 添加到项目的根目录。</p><p translation-origin="off">The SystemJS configuration file <code>systemjs.config.js</code> to the project root directory.</p></li></ul><p translation-result="on">这些完成之后，就运行：</p><p translation-origin="off">Once these are done, run:</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">npm install</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">npm install</span></code>
    </pre></aio-code></code-example><p translation-result="on">很快你就可以通过 <code>index.html</code> 来把 Angular 的依赖快速加载到应用中， 但首先，你得做一些目录结构调整。这是因为你正准备从 <code>node_modules</code> 中加载文件，然而目前项目中的每一个文件都是从 <code>/app</code> 目录下加载的。</p><p translation-origin="off">Soon you can load Angular dependencies into the application via <code>index.html</code>, but first you need to do some directory path adjustments. You'll need to load files from <code>node_modules</code> and the project root instead of from the <code>/app</code> directory as you've been doing to this point.</p><p translation-result="on">把 <code>app/index.html</code> 移入项目的根目录，然后把 <code>package.json</code> 中的开发服务器根目录也指向项目的根目录，而不再是 <code>app</code> 目录：</p><p translation-origin="off">Move the <code>app/index.html</code> file to the project root directory. Then change the development server root path in <code>package.json</code> to also point to the project root instead of <code>app</code>:</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">"start": "http-server ./ -a localhost -p 8000 -c-1",</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"start"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"http-server ./ -a localhost -p 8000 -c-1"</span><span class="pun">,</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在，你就能把项目根目录下的每一样东西发给浏览器了。但你<em>不想</em>为了适应开发环境中的设置，被迫修改应用代码中用到的所有图片和数据的路径。因此，你要往 <code>index.html</code> 中添加一个 <code>&lt;base&gt;</code> 标签，它将导致各种相对路径被解析回 <code>/app</code> 目录：</p><p translation-origin="off">Now you're able to serve everything from the project root to the web browser. But you do <em>not</em> want to have to change all the image and data paths used in the application code to match the development setup. For that reason, you'll add a <code>&lt;base&gt;</code> tag to <code>index.html</code>, which will cause relative URLs to be resolved back to the <code>/app</code> directory:</p><code-example path="upgrade-phonecat-2-hybrid/index.html" region="base" header="index.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;base href="/app/"&gt;</div><header class="ng-star-inserted">index.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from index.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;base</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/app/"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在你可以通过 SystemJS 加载 Angular 了。你还要把 Angular 的腻子脚本(polyfills) 和 SystemJS 的配置加到 <code>&lt;head&gt;</code> 区的末尾，然后，你能就用 <code>System.import</code> 来加载实际的应用了：</p><p translation-origin="off">Now you can load Angular via SystemJS. You'll add the Angular polyfills and the SystemJS config to the end of the <code>&lt;head&gt;</code> section, and then you'll use <code>System.import</code> to load the actual application:</p><code-example path="upgrade-phonecat-2-hybrid/index.html" region="angular" header="index.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;script src="/node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt; &lt;script src="/node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt; &lt;script src="/node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt; &lt;script src="/systemjs.config.js"&gt;&lt;/script&gt; &lt;script&gt; System.import('/app'); &lt;/script&gt;</div><header class="ng-star-inserted">index.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from index.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/node_modules/core-js/client/shim.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/node_modules/zone.js/dist/zone.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/node_modules/systemjs/dist/system.src.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/systemjs.config.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;script&gt;</span><span class="pln">
  </span><span class="typ">System</span><span class="pun">.</span><span class="kwd">import</span><span class="pun">(</span><span class="str">'/app'</span><span class="pun">);</span><span class="pln">
</span><span class="tag">&lt;/script&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">你还需要对<a href="guide/upgrade-setup">升级的准备工作</a>期间安装的 <code>systemjs.config.js</code> 文件做一些调整。</p><p translation-origin="off">You also need to make a couple of adjustments to the <code>systemjs.config.js</code> file installed during <a href="guide/upgrade-setup">upgrade setup</a>.</p><p translation-result="on">在 SystemJS 加载期间为浏览器指出项目的根在哪里，而不再使用 <code>&lt;base&gt;</code> URL。</p><p translation-origin="off">Point the browser to the project root when loading things through SystemJS, instead of using the <code>&lt;base&gt;</code> URL.</p><p translation-result="on">再通过 <code>npm install @angular/upgrade --save</code> 安装 <code>upgrade</code> 包，并为 <code>@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a></code> 包添加一个映射。</p><p translation-origin="off">Install the <code>upgrade</code> package via <code>npm install @angular/upgrade --save</code> and add a mapping for the <code>@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a></code> package.</p><code-example path="upgrade-phonecat-2-hybrid/systemjs.config.1.js" region="paths" header="systemjs.config.js" ng-version="9.0.0-rc.11"><div style="display:none">System.config({ paths: { // paths serve as alias 'npm:': '/node_modules/' }, map: { 'ng-loader': '../src/systemjs-angular-loader.js', app: '/app', /* . . . */ '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', /* . . . */ },</div><header class="ng-star-inserted">systemjs.config.js</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from systemjs.config.js">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="typ">System</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span><span class="pln">
    paths</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="com">// paths serve as alias</span><span class="pln">
      </span><span class="str">'npm:'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'/node_modules/'</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    map</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="str">'ng-loader'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'../src/systemjs-angular-loader.js'</span><span class="pun">,</span><span class="pln">
      app</span><span class="pun">:</span><span class="pln"> </span><span class="str">'/app'</span><span class="pun">,</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
      </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/upgrade/bundles/upgrade-static.umd.js'</span><span class="pun">,</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
    </span><span class="pun">},</span></code>
    </pre></aio-code></code-example><h3 id="creating-the-appmodule" translation-result="on">创建 <em>AppModule</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#creating-the-appmodule"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="creating-the-appmodule">Creating the <em>AppModule</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#creating-the-appmodule"><i class="material-icons">link</i></a></h3><p translation-result="on">现在，创建一个名叫 <code>AppModule</code> 的根 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 类。 这里已经有了一个名叫 <code>app.module.ts</code> 的文件，其中存放着 AngularJS 的模块。 把它改名为 <code>app.module.ng1.ts</code>，同时也要在 <code>index.html</code> 中修改对应的脚本名。 文件的内容保留：</p><p translation-origin="off">Now create the root <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> class called <code>AppModule</code>. There is already a file named <code>app.module.ts</code> that holds the AngularJS module. Rename it to <code>app.module.ajs.ts</code> and update the corresponding script name in the <code>index.html</code> as well. The file contents remain:</p><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ajs.ts" header="app.module.ajs.ts" ng-version="9.0.0-rc.11"><div style="display:none">'use strict'; // Define the `phonecatApp` AngularJS module angular.module('phonecatApp', [ 'ngAnimate', 'ngRoute', 'core', 'phoneDetail', 'phoneList', ]);</div><header class="ng-star-inserted">app.module.ajs.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ajs.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">'use strict'</span><span class="pun">;</span><span class="pln">

</span><span class="com">// Define the `phonecatApp` AngularJS module</span><span class="pln">
angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phonecatApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="str">'ngAnimate'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'ngRoute'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'core'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'phoneDetail'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'phoneList'</span><span class="pun">,</span><span class="pln">
</span><span class="pun">]);</span></code>
    </pre></aio-code></code-example><p translation-result="on">然后创建一个新的 <code>app.module.ts</code> 文件，其中是一个最小化的 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 类：</p><p translation-origin="off">Now create a new <code>app.module.ts</code> with the minimum <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> class:</p><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="bare" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, ], }) export class AppModule { }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h3 id="bootstrapping-a-hybrid-phonecat" translation-result="on">引导 PhoneCat 的混合式应用<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#bootstrapping-a-hybrid-phonecat"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="bootstrapping-a-hybrid-phonecat">Bootstrapping a hybrid PhoneCat<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#bootstrapping-a-hybrid-phonecat"><i class="material-icons">link</i></a></h3><p translation-result="on">接下来，你把该应用程序引导改装为一个同时支持 AngularJS 和 Angular 的<em>混合式应用</em>。 然后，就能开始把这些不可分割的小块转换到 Angular 了。</p><p translation-origin="off">Next, you'll bootstrap the application as a <em>hybrid application</em> that supports both AngularJS and Angular components. After that, you can start converting the individual pieces to Angular.</p><p translation-result="on">本应用现在是使用宿主页面中附加到 <code>&lt;html&gt;</code> 元素上的 AngularJS 指令 <code>ng-app</code> 引导的。 但在混合式应用中，不能再这么用了。你得用<a href="guide/upgrade#bootstrapping-hybrid-applications">ngUpgrade bootstrap</a>方法代替。</p><p translation-origin="off">The application is currently bootstrapped using the AngularJS <code>ng-app</code> directive attached to the <code>&lt;html&gt;</code> element of the host page. This will no longer work in the hybrid app. Switch to the <a href="guide/upgrade#bootstrapping-hybrid-applications">ngUpgrade bootstrap</a> method instead.</p><p translation-result="on">首先，从 <code>index.html</code> 中移除 <code>ng-app</code>。然后在 <code>AppModule</code> 中导入 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code>，并改写它的 <code>ngDoBootstrap</code> 方法：</p><p translation-origin="off">First, remove the <code>ng-app</code> attribute from <code>index.html</code>. Then import <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> in the <code>AppModule</code>, and override its <code>ngDoBootstrap</code> method:</p><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="upgrademodule" header="app/app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>, ], }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); } }</div><header class="ng-star-inserted">app/app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'phonecatApp'</span><span class="pun">]);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">注意，你正在从内部的 <code>ngDoBootstrap</code> 中引导 AngularJS 模块。 它的参数和你在手动引导 AngularJS 时传给 <code>angular.bootstrap</code> 的是一样的：应用的根元素，和所要加载的 AngularJS 1.x 模块的数组。</p><p translation-origin="off">Note that you are bootstrapping the AngularJS module from inside <code>ngDoBootstrap</code>. The arguments are the same as you would pass to <code>angular.bootstrap</code> if you were manually bootstrapping AngularJS: the root element of the application; and an array of the AngularJS 1.x modules that you want to load.</p><p translation-result="on">最后，在 <code>app/main.ts</code> 中引导这个 <code>AppModule</code>。该文件在 <code>systemjs.config.js</code> 中被配置为了应用的入口，所以它已经被加载进了浏览器中。</p><p translation-origin="off">Finally, bootstrap the <code>AppModule</code> in <code>app/main.ts</code>. This file has been configured as the application entrypoint in <code>systemjs.config.js</code>, so it is already being loaded by the browser.</p><code-example path="upgrade-phonecat-2-hybrid/app/main.ts" region="bootstrap" header="app/main.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a>().bootstrapModule(AppModule);</div><header class="ng-star-inserted">app/main.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/main.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser-dynamic'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.module'</span><span class="pun">;</span><span class="pln">

</span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pun">().</span><span class="pln">bootstrapModule</span><span class="pun">(</span><span class="typ">AppModule</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在，你同时运行着 AngularJS 和 Angular。漂亮！不过你还没有运行什么实际的 Angular 组件，这就是接下来要做的。</p><p translation-origin="off">Now you're running both AngularJS and Angular at the same time. That's pretty exciting! You're not running any actual Angular components yet. That's next.</p><div class="alert is-helpful"><h4 id="why-declare-angular-as-angulariangularstatic" translation-result="on">为何要声明 <em>angular</em> 为<em>angular.IAngularStatic</em>？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#why-declare-angular-as-angulariangularstatic"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="why-declare-angular-as-angulariangularstatic">Why declare <em>angular</em> as <em>angular.IAngularStatic</em>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#why-declare-angular-as-angulariangularstatic"><i class="material-icons">link</i></a></h4><p translation-result="on"><code>@types/angular</code> 声明为 UMD 模块，根据<a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions" target="_blank">UMD 类型</a> 的工作方式，一旦你在文件中有一条 ES6 的 <code>import</code> 语句，所有的 UMD 类型化的模型必须都通过 <code>import</code> 语句导入， 而是不是全局可用。</p><p translation-origin="off"><code>@types/angular</code> is declared as a UMD module, and due to the way <a href="https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions">UMD typings</a> work, once you have an ES6 <code>import</code> statement in a file all UMD typed modules must also be imported via <code>import</code> statements instead of being globally available.</p><p translation-result="on">AngularJS 是日前是通过 <code>index.html</code> 中的 script 标签加载，这意味着整个应用是作为一个全局变量进行访问的， 使用同一个 <code>angular</code> 变量的实例。 但如果你使用 <code>import * as angular from 'angular'</code>，我还需要彻底修改 AngularJS 应用中加载每个文件的方式， 确保 AngularJS 应用被正确加载。</p><p translation-origin="off">AngularJS is currently loaded by a script tag in <code>index.html</code>, which means that the whole app has access to it as a global and uses the same instance of the <code>angular</code> variable. If you used <code>import * as angular from 'angular'</code> instead, you'd also have to load every file in the AngularJS app to use ES2015 modules in order to ensure AngularJS was being loaded correctly.</p><p translation-result="on">这需要相当多的努力，通常也不值得去做，特别是当你正在朝着 Angular 前进时。 但如果你把 <code>angular</code> 声明为 <code>angular.IAngularStatic</code>，指明它是一个全局变量， 仍然可以获得全面的类型支持。</p><p translation-origin="off">This is a considerable effort and it often isn't worth it, especially since you are in the process of moving your code to Angular. Instead, declare <code>angular</code> as <code>angular.IAngularStatic</code> to indicate it is a global variable and still have full typing support.</p></div><h3 id="upgrading-the-phone-service" translation-result="on">升级 <code>Phone</code> 服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#upgrading-the-phone-service"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="upgrading-the-phone-service">Upgrading the Phone service<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#upgrading-the-phone-service"><i class="material-icons">link</i></a></h3><p translation-result="on">你要移植到 Angular 的第一个片段是 <code>Phone</code> 工厂(位于 <code>app/js/core/phones.factory.ts</code>)， 并且让它能帮助控制器从服务器上加载电话信息。目前，它是用 <code>ngResource</code> 实现的，你用它做两件事：</p><p translation-origin="off">The first piece you'll port over to Angular is the <code>Phone</code> service, which resides in <code>app/core/phone/phone.service.ts</code> and makes it possible for components to load phone information from the server. Right now it's implemented with ngResource and you're using it for two things:</p><ul><li><p translation-result="on">把所有电话的列表加载到电话列表组件中。</p><p translation-origin="off">For loading the list of all phones into the phone list component.</p></li><li><p translation-result="on">把一台电话的详情加载到电话详情组件中。</p><p translation-origin="off">For loading the details of a single phone into the phone detail component.</p></li></ul><p translation-result="on">你可以用 Angular 的服务类来替换这个实现，而把控制器继续留在 AngularJS 的地盘上。</p><p translation-origin="off">You can replace this implementation with an Angular service class, while keeping the controllers in AngularJS land.</p><p translation-result="on">在这个新版本中，你导入了 Angular 的 HTTP 模块，并且用它的 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 服务替换掉 <code>ngResource</code>。</p><p translation-origin="off">In the new version, you import the Angular HTTP module and call its <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> service instead of <code>ngResource</code>.</p><p translation-result="on">再次打开 <code>app.module.ts</code> 文件，导入并把 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> 添加到 <code>AppModule</code> 的 <code>imports</code> 数组中：</p><p translation-origin="off">Re-open the <code>app.module.ts</code> file, import and add <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> to the <code>imports</code> array of the <code>AppModule</code>:</p><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="httpclientmodule" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, ], }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'phonecatApp'</span><span class="pun">]);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在，你已经准备好了升级 <code>Phones</code> 服务本身。你将为 <code>phone.service.ts</code> 文件中基于 ngResource 的服务加上 <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a></code> 装饰器：</p><p translation-origin="off">Now you're ready to upgrade the Phone service itself. Replace the ngResource-based service in <code>phone.service.ts</code> with a TypeScript class decorated as <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a></code>:</p><code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="classdef" header="app/core/phone/phone.service.ts (skeleton)" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Injectable" class="code-anchor">Injectable</a>() export class Phone { /* . . . */ }</div><header class="ng-star-inserted">app/core/phone/phone.service.ts (skeleton)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/phone/phone.service.ts (skeleton)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">()</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">Phone</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a></code> 装饰器将把一些依赖注入相关的元数据附加到该类上，让 Angular 知道它的依赖信息。 就像在<a href="guide/dependency-injection">依赖注入指南</a>中描述过的那样， 这是一个标记装饰器，你要把它用在那些没有其它 Angular 装饰器，并且自己有依赖注入的类上。</p><p translation-origin="off">The <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a></code> decorator will attach some dependency injection metadata to the class, letting Angular know about its dependencies. As described by the <a href="guide/dependency-injection">Dependency Injection Guide</a>, this is a marker decorator you need to use for classes that have no other Angular decorators but still need to have their dependencies injected.</p><p translation-result="on">在它的构造函数中，该类期待一个 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 服务。<code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 服务将被注入进来并存入一个私有字段。 然后该服务在两个实例方法中被使用到，一个加载所有电话的列表，另一个加载一台指定电话的详情：</p><p translation-origin="off">In its constructor the class expects to get the <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> service. It will be injected to it and it is stored as a private field. The service is then used in the two instance methods, one of which loads the list of all phones, and the other loads the details of a specified phone:</p><code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="fullclass" header="app/core/phone/phone.service.ts" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/Injectable" class="code-anchor">Injectable</a>() export class Phone { constructor(private <a href="api/common/http" class="code-anchor">http</a>: <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a>) { } <a href="api/animations/query" class="code-anchor">query</a>(): Observable&lt;PhoneData[]&gt; { return this.http.get&lt;PhoneData[]&gt;(`phones/phones.json`); } get(id: string): Observable&lt;PhoneData&gt; { return this.http.get&lt;PhoneData&gt;(`phones/${id}.json`); } }</div><header class="ng-star-inserted">app/core/phone/phone.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/phone/phone.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">()</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">Phone</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> </span><a href="api/common/http" class="code-anchor"><span class="pln">http</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  </span><a href="api/animations/query" class="code-anchor"><span class="pln">query</span></a><span class="pun">():</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">[]&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">http</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">[]&gt;(</span><span class="str">`phones/phones.json`</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="kwd">get</span><span class="pun">(</span><span class="pln">id</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">):</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">http</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">&gt;(</span><span class="str">`phones/${id}.json`</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">该方法现在返回一个 <code>Phone</code> 类型或 <code>Phone[]</code> 类型的可观察对象(Observable)。 这是一个你从未用过的类型，因此你得为它新增一个简单的接口：</p><p translation-origin="off">The methods now return observables of type <code>PhoneData</code> and <code>PhoneData[]</code>. This is a type you don't have yet. Add a simple interface for it:</p><code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="phonedata-interface" header="app/core/phone/phone.service.ts (interface)" ng-version="9.0.0-rc.11"><div style="display:none">export interface PhoneData { name: string; snippet: string; images: string[]; }</div><header class="ng-star-inserted">app/core/phone/phone.service.ts (interface)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/phone/phone.service.ts (interface)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">interface</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  name</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
  snippet</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
  images</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">[];</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a></code> 有一个 <code><a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a></code> 方法，可以使 Angular 服务在 AngularJS 的代码中可用。 使用它来插入 <code>Phone</code> 服务：</p><p translation-origin="off"><code>@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a></code> has a <code><a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a></code> method for the purpose of making Angular services available to AngularJS code. Use it to plug in the <code>Phone</code> service:</p><code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" region="downgrade-injectable" header="app/core/phone/phone.service.ts (downgrade)" ng-version="9.0.0-rc.11"><div style="display:none">declare var angular: angular.IAngularStatic; import { <a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; /* . . . */ @<a href="api/core/Injectable" class="code-anchor">Injectable</a>() export class Phone { /* . . . */ } angular.module('core.phone') .factory('phone', <a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a>(Phone));</div><header class="ng-star-inserted">app/core/phone/phone.service.ts (downgrade)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/phone/phone.service.ts (downgrade)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">declare </span><span class="kwd">var</span><span class="pln"> angular</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IAngularStatic</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/downgradeInjectable" class="code-anchor"><span class="pln">downgradeInjectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">()</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">Phone</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'core.phone'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">factory</span><span class="pun">(</span><span class="str">'phone'</span><span class="pun">,</span><span class="pln"> </span><a href="api/upgrade/static/downgradeInjectable" class="code-anchor"><span class="pln">downgradeInjectable</span></a><span class="pun">(</span><span class="typ">Phone</span><span class="pun">));</span></code>
    </pre></aio-code></code-example><p translation-result="on">最终，该类的全部代码如下：</p><p translation-origin="off">Here's the full, final code for the service:</p><code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts" header="app/core/phone/phone.service.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Injectable" class="code-anchor">Injectable</a> } from '@angular/core'; import { <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>'; import { Observable } from 'rxjs'; declare var angular: angular.IAngularStatic; import { <a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; export interface PhoneData { name: string; snippet: string; images: string[]; } @<a href="api/core/Injectable" class="code-anchor">Injectable</a>() export class Phone { constructor(private <a href="api/common/http" class="code-anchor">http</a>: <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a>) { } <a href="api/animations/query" class="code-anchor">query</a>(): Observable&lt;PhoneData[]&gt; { return this.http.get&lt;PhoneData[]&gt;(`phones/phones.json`); } get(id: string): Observable&lt;PhoneData&gt; { return this.http.get&lt;PhoneData&gt;(`phones/${id}.json`); } } angular.module('core.phone') .factory('phone', <a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a>(Phone));</div><header class="ng-star-inserted">app/core/phone/phone.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/phone/phone.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Injectable" class="code-anchor"><span class="typ">Injectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Observable</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'rxjs'</span><span class="pun">;</span><span class="pln">

declare </span><span class="kwd">var</span><span class="pln"> angular</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IAngularStatic</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/downgradeInjectable" class="code-anchor"><span class="pln">downgradeInjectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">interface</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  name</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
  snippet</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
  images</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">[];</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">()</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">Phone</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> </span><a href="api/common/http" class="code-anchor"><span class="pln">http</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  </span><a href="api/animations/query" class="code-anchor"><span class="pln">query</span></a><span class="pun">():</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">[]&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">http</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">[]&gt;(</span><span class="str">`phones/phones.json`</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="kwd">get</span><span class="pun">(</span><span class="pln">id</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">):</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">http</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">&gt;(</span><span class="str">`phones/${id}.json`</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'core.phone'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">factory</span><span class="pun">(</span><span class="str">'phone'</span><span class="pun">,</span><span class="pln"> </span><a href="api/upgrade/static/downgradeInjectable" class="code-anchor"><span class="pln">downgradeInjectable</span></a><span class="pun">(</span><span class="typ">Phone</span><span class="pun">));</span></code>
    </pre></aio-code></code-example><p translation-result="on">注意，你要单独导入了 RxJS <code>Observable</code> 中的 <code>map</code> 操作符。 对每个 RxJS 操作符都要这么做。</p><p translation-origin="off">Notice that you're importing the <code>map</code> operator of the RxJS <code>Observable</code> separately. Do this for every RxJS operator.</p><p translation-result="on">这个新的 <code>Phone</code> 服务具有和老的基于 <code>ngResource</code> 的服务相同的特性。 因为它是 Angular 服务，你通过 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 的 <code>providers</code> 数组来注册它：</p><p translation-origin="off">The new <code>Phone</code> service has the same features as the original, <code>ngResource</code>-based service. Because it's an Angular service, you register it with the <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> providers:</p><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phone" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { Phone } from './core/phone/phone.service'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, ], providers: [ Phone, ] }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./core/phone/phone.service'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'phonecatApp'</span><span class="pun">]);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在，你正在用 SystemJS 加载 <code>phone.service.ts</code>，你应该从 <code>index.html</code> 中<strong>移除该服务的 <code>&lt;script&gt;</code> 标签</strong>。 这也是你在升级所有组件时将会做的事。在从 AngularJS 向 Angular 升级的同时，你也把代码从脚本移植为模块。</p><p translation-origin="off">Now that you are loading <code>phone.service.ts</code> through an import that is resolved by SystemJS, you should <strong>remove the &lt;script&gt; tag</strong> for the service from <code>index.html</code>. This is something you'll do to all components as you upgrade them. Simultaneously with the AngularJS to Angular upgrade you're also migrating code from scripts to modules.</p><p translation-result="on">这时，你可以把两个控制器从使用老的服务切换成使用新的。你像降级过的 <code>phones</code> 工厂一样 <code>$inject</code> 它， 但它实际上是一个 <code>Phones</code> 类的实例，并且你可以据此注解它的类型：</p><p translation-origin="off">At this point, you can switch the two components to use the new service instead of the old one. While you <code>$inject</code> it as the downgraded <code>phone</code> factory, it's really an instance of the <code>Phone</code> class and you annotate its type accordingly:</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts" header="app/phone-list/phone-list.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">declare var angular: angular.IAngularStatic; import { Phone, PhoneData } from '../core/phone/phone.service'; class PhoneListController { phones: PhoneData[]; orderProp: string; <a href="api/upgrade/static" class="code-anchor">static</a> $inject = ['phone']; constructor(phone: Phone) { phone.query().subscribe(phones =&gt; { this.phones = phones; }); this.orderProp = 'age'; } } angular. module('phoneList'). component('phoneList', { <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: 'app/phone-list/phone-list.template.html', controller: PhoneListController });</div><header class="ng-star-inserted">app/phone-list/phone-list.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">declare </span><span class="kwd">var</span><span class="pln"> angular</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IAngularStatic</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/phone/phone.service'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">PhoneListController</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  phones</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">[];</span><span class="pln">
  orderProp</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">

  </span><a href="api/upgrade/static" class="code-anchor"><span class="kwd">static</span></a><span class="pln"> $inject </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'phone'</span><span class="pun">];</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    phone</span><span class="pun">.</span><span class="pln">query</span><span class="pun">().</span><span class="pln">subscribe</span><span class="pun">(</span><span class="pln">phones </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">phones </span><span class="pun">=</span><span class="pln"> phones</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">orderProp </span><span class="pun">=</span><span class="pln"> </span><span class="str">'age'</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span><span class="pln">

angular</span><span class="pun">.</span><span class="pln">
  </span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phoneList'</span><span class="pun">).</span><span class="pln">
  component</span><span class="pun">(</span><span class="str">'phoneList'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'app/phone-list/phone-list.template.html'</span><span class="pun">,</span><span class="pln">
    controller</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneListController</span><span class="pln">
  </span><span class="pun">});</span></code>
    </pre></aio-code></code-example><code-example path="upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts" header="app/phone-detail/phone-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">declare var angular: angular.IAngularStatic; import { Phone, PhoneData } from '../core/phone/phone.service'; class PhoneDetailController { phone: PhoneData; mainImageUrl: string; <a href="api/upgrade/static" class="code-anchor">static</a> $inject = ['$routeParams', 'phone']; constructor($routeParams: angular.route.IRouteParamsService, phone: Phone) { let phoneId = $routeParams['phoneId']; phone.get(phoneId).subscribe(data =&gt; { this.phone = data; this.setImage(data.images[0]); }); } setImage(imageUrl: string) { this.mainImageUrl = imageUrl; } } angular. module('phoneDetail'). component('phoneDetail', { <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: 'phone-detail/phone-detail.template.html', controller: PhoneDetailController });</div><header class="ng-star-inserted">app/phone-detail/phone-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-detail/phone-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">declare </span><span class="kwd">var</span><span class="pln"> angular</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IAngularStatic</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/phone/phone.service'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">PhoneDetailController</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">;</span><span class="pln">
  mainImageUrl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">

  </span><a href="api/upgrade/static" class="code-anchor"><span class="kwd">static</span></a><span class="pln"> $inject </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str">'$routeParams'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'phone'</span><span class="pun">];</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">$routeParams</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">route</span><span class="pun">.</span><span class="typ">IRouteParamsService</span><span class="pun">,</span><span class="pln"> phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> phoneId </span><span class="pun">=</span><span class="pln"> $routeParams</span><span class="pun">[</span><span class="str">'phoneId'</span><span class="pun">];</span><span class="pln">
    phone</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">phoneId</span><span class="pun">).</span><span class="pln">subscribe</span><span class="pun">(</span><span class="pln">data </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">phone </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">;</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">setImage</span><span class="pun">(</span><span class="pln">data</span><span class="pun">.</span><span class="pln">images</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  setImage</span><span class="pun">(</span><span class="pln">imageUrl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">mainImageUrl </span><span class="pun">=</span><span class="pln"> imageUrl</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

angular</span><span class="pun">.</span><span class="pln">
  </span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phoneDetail'</span><span class="pun">).</span><span class="pln">
  component</span><span class="pun">(</span><span class="str">'phoneDetail'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'phone-detail/phone-detail.template.html'</span><span class="pun">,</span><span class="pln">
    controller</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneDetailController</span><span class="pln">
  </span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">这里的两个 AngularJS 控制器在使用 Angular 的服务！控制器不需要关心这一点，尽管实际上该服务返回的是可观察对象(Observable)，而不是承诺(Promise)。 无论如何，你达到的效果都是把服务移植到 Angular，而不用被迫移植组件来使用它。</p><p translation-origin="off">Now there are two AngularJS components using an Angular service! The components don't need to be aware of this, though the fact that the service returns observables and not promises is a bit of a giveaway. In any case, what you've achieved is a migration of a service to Angular without having to yet migrate the components that use it.</p><div class="alert is-helpful"><p translation-result="on">你也能使用 <code>Observable</code> 的 <code>toPromise</code> 方法来在服务中把这些可观察对象转变成承诺，以进一步减小组件控制器中需要修改的代码量。</p><p translation-origin="off">You could use the <code>toPromise</code> method of <code>Observable</code> to turn those observables into promises in the service. In many cases that reduce the number of changes to the component controllers.</p></div><h3 id="upgrading-components" translation-result="on">升级组件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#upgrading-components"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="upgrading-components">Upgrading Components<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#upgrading-components"><i class="material-icons">link</i></a></h3><p translation-result="on">接下来，把 AngularJS 的控制器升级成 Angular 的组件。每次升级一个，同时仍然保持应用运行在混合模式下。 在做转换的同时，你还将自定义首个 Angular<em>管道</em>。</p><p translation-origin="off">Upgrade the AngularJS components to Angular components next. Do it one component at a time while still keeping the application in hybrid mode. As you make these conversions, you'll also define your first Angular <em>pipes</em>.</p><p translation-result="on">先看看电话列表组件。它目前包含一个 TypeScript 控制器类和一个组件定义对象。重命名控制器类， 并把 AngularJS 的组件定义对象更换为 Angular <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> 装饰器，这样你就把它变形为 Angular 的组件了。然后，你还要从类中移除静态 <code>$inject</code> 属性。</p><p translation-origin="off">Look at the phone list component first. Right now it contains a TypeScript controller class and a component definition object. You can morph this into an Angular component by just renaming the controller class and turning the AngularJS component definition object into an Angular <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> decorator. You can then also remove the static <code>$inject</code> property from the class:</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts" region="initialclass" header="app/phone-list/phone-list.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { Phone, PhoneData } from '../core/phone/phone.service'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'phone-list', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './phone-list.template.html' }) export class PhoneListComponent { phones: PhoneData[]; <a href="api/animations/query" class="code-anchor">query</a>: string; orderProp: string; constructor(phone: Phone) { phone.query().subscribe(phones =&gt; { this.phones = phones; }); this.orderProp = 'age'; } /* . . . */ }</div><header class="ng-star-inserted">app/phone-list/phone-list.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/phone/phone.service'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phone-list'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./phone-list.template.html'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  phones</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">[];</span><span class="pln">
  </span><a href="api/animations/query" class="code-anchor"><span class="pln">query</span></a><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
  orderProp</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    phone</span><span class="pun">.</span><span class="pln">query</span><span class="pun">().</span><span class="pln">subscribe</span><span class="pun">(</span><span class="pln">phones </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">phones </span><span class="pun">=</span><span class="pln"> phones</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">orderProp </span><span class="pun">=</span><span class="pln"> </span><span class="str">'age'</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>selector</code> 属性是一个 CSS 选择器，用来定义组件应该被放在页面的哪。在 AngularJS 中，你会基于组件名字来匹配， 但是在 Angular 中，你要显式指定这些选择器。本组件将会对应元素名字 <code>phone-list</code>，和 AngularJS 版本一样。</p><p translation-origin="off">The <code>selector</code> attribute is a CSS selector that defines where on the page the component should go. In AngularJS you do matching based on component names, but in Angular you have these explicit selectors. This one will match elements with the name <code>phone-list</code>, just like the AngularJS version did.</p><p translation-result="on">现在，将组件的模版也转换为 Angular 语法。在搜索控件中，把 AngularJS 的 <code>$ctrl</code> 表达式替换成 Angular 的双向绑定语法 <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code>：</p><p translation-origin="off">Now convert the template of this component into Angular syntax. The search controls replace the AngularJS <code>$ctrl</code> expressions with Angular's two-way <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> binding syntax:</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html" region="controls" header="app/phone-list/phone-list.template.html (search controls)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;p&gt; Search: &lt;input [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="<a href="api/animations/query" class="code-anchor">query</a>" /&gt; &lt;/p&gt; &lt;p&gt; Sort by: &lt;select [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="orderProp"&gt; &lt;option value="name"&gt;Alphabetical&lt;/option&gt; &lt;option value="age"&gt;Newest&lt;/option&gt; &lt;/select&gt; &lt;/p&gt;</div><header class="ng-star-inserted">app/phone-list/phone-list.template.html (search controls)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.template.html (search controls)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;p&gt;</span><span class="pln">
  Search:
  </span><span class="tag">&lt;input</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"</span><a href="api/animations/query" class="code-anchor"><span class="atv">query</span></a><span class="atv">"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/p&gt;</span><span class="pln">

</span><span class="tag">&lt;p&gt;</span><span class="pln">
  Sort by:
  </span><span class="tag">&lt;select</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"orderProp"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"name"</span><span class="tag">&gt;</span><span class="pln">Alphabetical</span><span class="tag">&lt;/option&gt;</span><span class="pln">
    </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"age"</span><span class="tag">&gt;</span><span class="pln">Newest</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  </span><span class="tag">&lt;/select&gt;</span><span class="pln">
</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">把列表中的 <code>ng-repeat</code> 替换为 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 以及它的 <code>let var of iterable</code> 语法， 该语法在<a href="guide/template-syntax#directives">模板语法指南中讲过</a>。 再把 <code>img</code> 标签的 <code>ng-src</code> 替换为一个标准的 <code>src</code> 属性(property)绑定。</p><p translation-origin="off">Replace the list's <code>ng-repeat</code> with an <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> as <a href="guide/template-syntax#directives">described in the Template Syntax page</a>. Replace the image tag's <code>ng-src</code> with a binding to the native <code>src</code> property.</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html" region="list" header="app/phone-list/phone-list.template.html (phones)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;ul class="phones"&gt; &lt;li *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let phone of getPhones()" class="thumbnail phone-list-item"&gt; &lt;a href="/#!/phones/{{phone.id}}" class="thumb"&gt; &lt;img [src]="phone.imageUrl" [alt]="phone.name" /&gt; &lt;/a&gt; &lt;a href="/#!/phones/{{phone.id}}" class="name"&gt;{{phone.name}}&lt;/a&gt; &lt;p&gt;{{phone.snippet}}&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt;</div><header class="ng-star-inserted">app/phone-list/phone-list.template.html (phones)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.template.html (phones)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"phones"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let phone of getPhones()"</span><span class="pln">
      </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"thumbnail phone-list-item"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/#!/phones/{{phone.id}}"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"thumb"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"phone.imageUrl"</span><span class="pln"> [</span><span class="atn">alt</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"phone.name"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/#!/phones/{{phone.id}}"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"name"</span><span class="tag">&gt;</span><span class="pln">{{phone.name}}</span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">{{phone.snippet}}</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span></code>
    </pre></aio-code></code-example><h4 id="no-angular-filter-or-orderby-filters" translation-result="on">Angular 中没有 <code>filter</code> 或 <code>orderBy</code> 过滤器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#no-angular-filter-or-orderby-filters"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="no-angular-filter-or-orderby-filters">No Angular <em>filter</em> or <em>orderBy</em> filters<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#no-angular-filter-or-orderby-filters"><i class="material-icons">link</i></a></h4><p translation-result="on">Angular 中并不存在 AngularJS 中内置的 <code>filter</code> 和 <code>orderBy</code> 过滤器。 所以你得自己实现进行过滤和排序。</p><p translation-origin="off">The built-in AngularJS <code>filter</code> and <code>orderBy</code> filters do not exist in Angular, so you need to do the filtering and sorting yourself.</p><p translation-result="on">你把 <code>filter</code> 和 <code>orderBy</code> 过滤器改成绑定到控制器中的 <code>getPhones()</code> 方法，通过该方法，组件本身实现了过滤和排序逻辑。</p><p translation-origin="off">You replaced the <code>filter</code> and <code>orderBy</code> filters with bindings to the <code>getPhones()</code> controller method, which implements the filtering and ordering logic inside the component itself.</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts" region="getphones" header="app/phone-list/phone-list.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">getPhones(): PhoneData[] { return this.sortPhones(this.filterPhones(this.phones)); } private filterPhones(phones: PhoneData[]) { if (phones &amp;&amp; this.query) { return phones.filter(phone =&gt; { let name = phone.name.toLowerCase(); let snippet = phone.snippet.toLowerCase(); return name.indexOf(this.query) &gt;= 0 || snippet.indexOf(this.query) &gt;= 0; }); } return phones; } private sortPhones(phones: PhoneData[]) { if (phones &amp;&amp; this.orderProp) { return phones .slice(0) // Make a copy .sort((a, b) =&gt; { if (a[this.orderProp] &lt; b[this.orderProp]) { return -1; } else if ([b[this.orderProp] &lt; a[this.orderProp]]) { return 1; } else { return 0; } }); } return phones; }</div><header class="ng-star-inserted">app/phone-list/phone-list.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">getPhones</span><span class="pun">():</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">[]</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">sortPhones</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">filterPhones</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">phones</span><span class="pun">));</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">private</span><span class="pln"> filterPhones</span><span class="pun">(</span><span class="pln">phones</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">[])</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">phones </span><span class="pun">&amp;&amp;</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">query</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> phones</span><span class="pun">.</span><span class="pln">filter</span><span class="pun">(</span><span class="pln">phone </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">let</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> phone</span><span class="pun">.</span><span class="pln">name</span><span class="pun">.</span><span class="pln">toLowerCase</span><span class="pun">();</span><span class="pln">
      </span><span class="kwd">let</span><span class="pln"> snippet </span><span class="pun">=</span><span class="pln"> phone</span><span class="pun">.</span><span class="pln">snippet</span><span class="pun">.</span><span class="pln">toLowerCase</span><span class="pun">();</span><span class="pln">
      </span><span class="kwd">return</span><span class="pln"> name</span><span class="pun">.</span><span class="pln">indexOf</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">query</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&gt;=</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> snippet</span><span class="pun">.</span><span class="pln">indexOf</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">query</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&gt;=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> phones</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">private</span><span class="pln"> sortPhones</span><span class="pun">(</span><span class="pln">phones</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">[])</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">phones </span><span class="pun">&amp;&amp;</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">orderProp</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> phones
      </span><span class="pun">.</span><span class="pln">slice</span><span class="pun">(</span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="com">// Make a copy</span><span class="pln">
      </span><span class="pun">.</span><span class="pln">sort</span><span class="pun">((</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> b</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">a</span><span class="pun">[</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">orderProp</span><span class="pun">]</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln"> b</span><span class="pun">[</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">orderProp</span><span class="pun">])</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">([</span><span class="pln">b</span><span class="pun">[</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">orderProp</span><span class="pun">]</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln"> a</span><span class="pun">[</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">orderProp</span><span class="pun">]])</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="kwd">return</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="kwd">return</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
      </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> phones</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在你需要降级你的 Angular 组件，这样你就可以在 AngularJS 中使用它了。 你要注册一个 <code>phoneList</code><em>指令</em>，而不是注册一个组件，它是一个降级版的 Angular 组件。</p><p translation-origin="off">Now you need to downgrade the Angular component so you can use it in AngularJS. Instead of registering a component, you register a <code>phoneList</code> <em>directive</em>, a downgraded version of the Angular component.</p><p translation-result="on">强制类型转换 <code>as angular.IDirectiveFactory</code> 告诉 TypeScript 编译器 <code><a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a></code> 方法 的返回值是一个指令工厂。</p><p translation-origin="off">The <code>as angular.IDirectiveFactory</code> cast tells the TypeScript compiler that the return value of the <code><a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a></code> method is a directive factory.</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts" region="downgrade-component" header="app/phone-list/phone-list.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">declare var angular: angular.IAngularStatic; import { <a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; /* . . . */ @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'phone-list', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './phone-list.template.html' }) export class PhoneListComponent { /* . . . */ } angular.module('phoneList') .directive( 'phoneList', <a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>({component: PhoneListComponent}) as angular.IDirectiveFactory );</div><header class="ng-star-inserted">app/phone-list/phone-list.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">declare </span><span class="kwd">var</span><span class="pln"> angular</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IAngularStatic</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/downgradeComponent" class="code-anchor"><span class="pln">downgradeComponent</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phone-list'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./phone-list.template.html'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">/* . . . */</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phoneList'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">directive</span><span class="pun">(</span><span class="pln">
    </span><span class="str">'phoneList'</span><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/downgradeComponent" class="code-anchor"><span class="pln">downgradeComponent</span></a><span class="pun">({</span><span class="pln">component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pun">})</span><span class="pln"> </span><span class="kwd">as</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IDirectiveFactory</span><span class="pln">
  </span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">新的 <code>PhoneListComponent</code> 使用 Angular 的 <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> 指令，它位于 <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> 中。 把 <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> 添加到 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 的 <code>imports</code> 中，并声明新的 <code>PhoneListComponent</code> 组件， 最后，把降级的结果添加到 <code>entryComponents</code>中：</p><p translation-origin="off">The new <code>PhoneListComponent</code> uses the Angular <code><a href="api/forms/NgModel" class="code-anchor">ngModel</a></code> directive, located in the <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code>. Add the <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> to <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> imports, declare the new <code>PhoneListComponent</code> and finally add it to <code>entryComponents</code> since you downgraded it:</p><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phonelist" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a> } from '@angular/forms'; import { PhoneListComponent } from './phone-list/phone-list.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a>, ], declarations: [ PhoneListComponent, ], entryComponents: [ PhoneListComponent, }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/forms'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-list/phone-list.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">PhoneListComponent</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  entryComponents</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">PhoneListComponent</span><span class="pun">,</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'phonecatApp'</span><span class="pun">]);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">从 <code>index.html</code> 中移除电话列表组件的&lt;script&gt;标签。</p><p translation-origin="off">Remove the &lt;script&gt; tag for the phone list component from <code>index.html</code>.</p><p translation-result="on">现在，剩下的 <code>phone-detail.component.ts</code> 文件变成了这样：</p><p translation-origin="off">Now set the remaining <code>phone-detail.component.ts</code> as follows:</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts" header="app/phone-detail/phone-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">declare var angular: angular.IAngularStatic; import { <a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a> } from '@angular/upgrade/<a href="api/upgrade/static" class="code-anchor">static</a>'; import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { Phone, PhoneData } from '../core/phone/phone.service'; import { RouteParams } from '../ajs-upgraded-providers'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'phone-detail', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './phone-detail.template.html', }) export class PhoneDetailComponent { phone: PhoneData; mainImageUrl: string; constructor(routeParams: RouteParams, phone: Phone) { phone.get(routeParams['phoneId']).subscribe(phone =&gt; { this.phone = phone; this.setImage(phone.images[0]); }); } setImage(imageUrl: string) { this.mainImageUrl = imageUrl; } } angular.module('phoneDetail') .directive( 'phoneDetail', <a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>({component: PhoneDetailComponent}) as angular.IDirectiveFactory );</div><header class="ng-star-inserted">app/phone-detail/phone-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-detail/phone-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">declare </span><span class="kwd">var</span><span class="pln"> angular</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IAngularStatic</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/upgrade/static/downgradeComponent" class="code-anchor"><span class="pln">downgradeComponent</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/upgrade/</span><a href="api/upgrade/static" class="code-anchor"><span class="str">static</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/phone/phone.service'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">RouteParams</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../ajs-upgraded-providers'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phone-detail'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./phone-detail.template.html'</span><span class="pun">,</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">;</span><span class="pln">
  mainImageUrl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">routeParams</span><span class="pun">:</span><span class="pln"> </span><span class="typ">RouteParams</span><span class="pun">,</span><span class="pln"> phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    phone</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">routeParams</span><span class="pun">[</span><span class="str">'phoneId'</span><span class="pun">]).</span><span class="pln">subscribe</span><span class="pun">(</span><span class="pln">phone </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">phone </span><span class="pun">=</span><span class="pln"> phone</span><span class="pun">;</span><span class="pln">
      </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">setImage</span><span class="pun">(</span><span class="pln">phone</span><span class="pun">.</span><span class="pln">images</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  setImage</span><span class="pun">(</span><span class="pln">imageUrl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">mainImageUrl </span><span class="pun">=</span><span class="pln"> imageUrl</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phoneDetail'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">directive</span><span class="pun">(</span><span class="pln">
    </span><span class="str">'phoneDetail'</span><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/downgradeComponent" class="code-anchor"><span class="pln">downgradeComponent</span></a><span class="pun">({</span><span class="pln">component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pun">})</span><span class="pln"> </span><span class="kwd">as</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IDirectiveFactory</span><span class="pln">
  </span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">这和电话列表组件很相似。 这里的窍门在于 <code>@<a href="api/core/Inject" class="code-anchor">Inject</a></code> 装饰器，它标记出了 <code>$routeParams</code> 依赖。</p><p translation-origin="off">This is similar to the phone list component. The new wrinkle is the <code>RouteParams</code> type annotation that identifies the <code>routeParams</code> dependency.</p><p translation-result="on">AngularJS 注入器具有 AngularJS 路由器的依赖，叫做 <code>$routeParams</code>。 它被注入到了 <code>PhoneDetails</code> 中，但 <code>PhoneDetails</code> 现在还是一个 AngularJS 控制器。 你要把它注入到新的 <code>PhoneDetailsComponent</code> 中。</p><p translation-origin="off">The AngularJS injector has an AngularJS router dependency called <code>$routeParams</code>, which was injected into <code>PhoneDetails</code> when it was still an AngularJS controller. You intend to inject it into the new <code>PhoneDetailsComponent</code>.</p><p translation-result="on">不幸的是，AngularJS 的依赖不会自动在 Angular 的组件中可用。 你必须使用<a href="guide/upgrade#making-angularjs-dependencies-injectable-to-angular">工厂提供商（factory provider）</a> 来把 <code>$routeParams</code> 包装成 Angular 的服务提供商。 新建一个名叫 <code>ajs-upgraded-providers.ts</code> 的文件，并且在 <code>app.module.ts</code> 中导入它：</p><p translation-origin="off">Unfortunately, AngularJS dependencies are not automatically available to Angular components. You must upgrade this service via a <a href="guide/upgrade#making-angularjs-dependencies-injectable-to-angular">factory provider</a> to make <code>$routeParams</code> an Angular injectable. Do that in a new file called <code>ajs-upgraded-providers.ts</code> and import it in <code>app.module.ts</code>:</p><code-example path="upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts" header="app/ajs-upgraded-providers.ts" ng-version="9.0.0-rc.11"><div style="display:none">export abstract class RouteParams { [key: string]: string; } export function routeParamsFactory(i: any) { return i.get('$routeParams'); } export const routeParamsProvider = { provide: RouteParams, <a href="api/core/FactorySansProvider#useFactory" class="code-anchor">useFactory</a>: routeParamsFactory, deps: ['$injector'] };</div><header class="ng-star-inserted">app/ajs-upgraded-providers.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/ajs-upgraded-providers.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">abstract</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">RouteParams</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> routeParamsFactory</span><span class="pun">(</span><span class="pln">i</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> i</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'$routeParams'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> routeParamsProvider </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  provide</span><span class="pun">:</span><span class="pln"> </span><span class="typ">RouteParams</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/FactorySansProvider#useFactory" class="code-anchor"><span class="pln">useFactory</span></a><span class="pun">:</span><span class="pln"> routeParamsFactory</span><span class="pun">,</span><span class="pln">
  deps</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'$injector'</span><span class="pun">]</span><span class="pln">
</span><span class="pun">};</span></code>
    </pre></aio-code></code-example><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="routeparams" header="app/app.module.ts ($routeParams)" ng-version="9.0.0-rc.11"><div style="display:none">import { routeParamsProvider } from './ajs-upgraded-providers'; providers: [ Phone, routeParamsProvider ]</div><header class="ng-star-inserted">app/app.module.ts ($routeParams)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/app.module.ts ($routeParams)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> routeParamsProvider </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./ajs-upgraded-providers'</span><span class="pun">;</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln">
    routeParamsProvider
  </span><span class="pun">]</span></code>
    </pre></aio-code></code-example><p translation-result="on">把该组件的模板转变成 Angular 的语法，代码如下：</p><p translation-origin="off">Convert the phone detail component template into Angular syntax as follows:</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html" header="app/phone-detail/phone-detail.template.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="phone"&gt; &lt;div class="phone-images"&gt; &lt;img [src]="img" class="phone" [<a href="api/common/NgClass" class="code-anchor">ngClass</a>]="{'selected': img === mainImageUrl}" *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let img of phone.images" /&gt; &lt;/div&gt; &lt;h1&gt;{{phone.name}}&lt;/h1&gt; &lt;p&gt;{{phone.description}}&lt;/p&gt; &lt;ul class="phone-thumbs"&gt; &lt;li *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let img of phone.images"&gt; &lt;img [src]="img" (click)="setImage(img)" /&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul class="specs"&gt; &lt;li&gt; &lt;span&gt;Availability and Networks&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;Availability&lt;/dt&gt; &lt;dd *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let availability of phone.availability"&gt;{{availability}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Battery&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;<a href="api/core/Type" class="code-anchor">Type</a>&lt;/dt&gt; &lt;dd&gt;{{phone.battery?.type}}&lt;/dd&gt; &lt;dt&gt;Talk <a href="api/common/Time" class="code-anchor">Time</a>&lt;/dt&gt; &lt;dd&gt;{{phone.battery?.talkTime}}&lt;/dd&gt; &lt;dt&gt;Standby <a href="" class="code-anchor">time</a> (max)&lt;/dt&gt; &lt;dd&gt;{{phone.battery?.standbyTime}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Storage and Memory&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;RAM&lt;/dt&gt; &lt;dd&gt;{{phone.storage?.ram}}&lt;/dd&gt; &lt;dt&gt;Internal Storage&lt;/dt&gt; &lt;dd&gt;{{phone.storage?.flash}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Connectivity&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;Network Support&lt;/dt&gt; &lt;dd&gt;{{phone.connectivity?.cell}}&lt;/dd&gt; &lt;dt&gt;WiFi&lt;/dt&gt; &lt;dd&gt;{{phone.connectivity?.wifi}}&lt;/dd&gt; &lt;dt&gt;Bluetooth&lt;/dt&gt; &lt;dd&gt;{{phone.connectivity?.bluetooth}}&lt;/dd&gt; &lt;dt&gt;Infrared&lt;/dt&gt; &lt;dd&gt;{{phone.connectivity?.infrared | checkmark}}&lt;/dd&gt; &lt;dt&gt;GPS&lt;/dt&gt; &lt;dd&gt;{{phone.connectivity?.gps | checkmark}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Android&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;OS <a href="api/core/Version" class="code-anchor">Version</a>&lt;/dt&gt; &lt;dd&gt;{{phone.android?.os}}&lt;/dd&gt; &lt;dt&gt;UI&lt;/dt&gt; &lt;dd&gt;{{phone.android?.ui}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Size and Weight&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;Dimensions&lt;/dt&gt; &lt;dd *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let dim of phone.sizeAndWeight?.dimensions"&gt;{{dim}}&lt;/dd&gt; &lt;dt&gt;Weight&lt;/dt&gt; &lt;dd&gt;{{phone.sizeAndWeight?.weight}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Display&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;Screen size&lt;/dt&gt; &lt;dd&gt;{{phone.display?.screenSize}}&lt;/dd&gt; &lt;dt&gt;Screen resolution&lt;/dt&gt; &lt;dd&gt;{{phone.display?.screenResolution}}&lt;/dd&gt; &lt;dt&gt;Touch screen&lt;/dt&gt; &lt;dd&gt;{{phone.display?.touchScreen | checkmark}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Hardware&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;CPU&lt;/dt&gt; &lt;dd&gt;{{phone.hardware?.cpu}}&lt;/dd&gt; &lt;dt&gt;USB&lt;/dt&gt; &lt;dd&gt;{{phone.hardware?.usb}}&lt;/dd&gt; &lt;dt&gt;Audio / headphone jack&lt;/dt&gt; &lt;dd&gt;{{phone.hardware?.audioJack}}&lt;/dd&gt; &lt;dt&gt;FM Radio&lt;/dt&gt; &lt;dd&gt;{{phone.hardware?.fmRadio | checkmark}}&lt;/dd&gt; &lt;dt&gt;Accelerometer&lt;/dt&gt; &lt;dd&gt;{{phone.hardware?.accelerometer | checkmark}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Camera&lt;/span&gt; &lt;dl&gt; &lt;dt&gt;Primary&lt;/dt&gt; &lt;dd&gt;{{phone.camera?.primary}}&lt;/dd&gt; &lt;dt&gt;Features&lt;/dt&gt; &lt;dd&gt;{{phone.camera?.features?.join(', ')}}&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Additional Features&lt;/span&gt; &lt;dd&gt;{{phone.additionalFeatures}}&lt;/dd&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</div><header class="ng-star-inserted">app/phone-detail/phone-detail.template.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-detail/phone-detail.template.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"phone"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"phone-images"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"img"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"phone"</span><span class="pln">
        [</span><a href="api/common/NgClass" class="code-anchor"><span class="atn">ngClass</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"{'selected': img === mainImageUrl}"</span><span class="pln">
        *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let img of phone.images"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">

  </span><span class="tag">&lt;h1&gt;</span><span class="pln">{{phone.name}}</span><span class="tag">&lt;/h1&gt;</span><span class="pln">

  </span><span class="tag">&lt;p&gt;</span><span class="pln">{{phone.description}}</span><span class="tag">&lt;/p&gt;</span><span class="pln">

  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"phone-thumbs"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let img of phone.images"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"img"</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"setImage(img)"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">

  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"specs"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Availability and Networks</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Availability</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let availability of phone.availability"</span><span class="tag">&gt;</span><span class="pln">{{availability}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Battery</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><a href="api/core/Type" class="code-anchor"><span class="pln">Type</span></a><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.battery?.type}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Talk </span><a href="api/common/Time" class="code-anchor"><span class="pln">Time</span></a><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.battery?.talkTime}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Standby </span><a href="" class="code-anchor"><span class="pln">time</span></a><span class="pln"> (max)</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.battery?.standbyTime}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Storage and Memory</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">RAM</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.storage?.ram}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Internal Storage</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.storage?.flash}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Connectivity</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Network Support</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.connectivity?.cell}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">WiFi</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.connectivity?.wifi}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Bluetooth</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.connectivity?.bluetooth}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Infrared</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.connectivity?.infrared | checkmark}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">GPS</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.connectivity?.gps | checkmark}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Android</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">OS </span><a href="api/core/Version" class="code-anchor"><span class="pln">Version</span></a><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.android?.os}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">UI</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.android?.ui}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Size and Weight</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Dimensions</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let dim of phone.sizeAndWeight?.dimensions"</span><span class="tag">&gt;</span><span class="pln">{{dim}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Weight</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.sizeAndWeight?.weight}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Display</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Screen size</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.display?.screenSize}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Screen resolution</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.display?.screenResolution}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Touch screen</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.display?.touchScreen | checkmark}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Hardware</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">CPU</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.hardware?.cpu}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">USB</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.hardware?.usb}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Audio / headphone jack</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.hardware?.audioJack}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">FM Radio</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.hardware?.fmRadio | checkmark}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Accelerometer</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.hardware?.accelerometer | checkmark}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Camera</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dl&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Primary</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.camera?.primary}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
        </span><span class="tag">&lt;dt&gt;</span><span class="pln">Features</span><span class="tag">&lt;/dt&gt;</span><span class="pln">
        </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.camera?.features?.join(', ')}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
      </span><span class="tag">&lt;/dl&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;span&gt;</span><span class="pln">Additional Features</span><span class="tag">&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;dd&gt;</span><span class="pln">{{phone.additionalFeatures}}</span><span class="tag">&lt;/dd&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这里有几个值得注意的改动：</p><p translation-origin="off">There are several notable changes here:</p><ul><li><p translation-result="on">你从所有表达式中移除了 <code>$ctrl.</code> 前缀。</p><p translation-origin="off">You've removed the <code>$ctrl.</code> prefix from all expressions.</p></li><li><p translation-result="on">正如你在电话列表中做过的那样，你把 <code>ng-src</code> 替换成了标准的 <code>src</code> 属性绑定。</p><p translation-origin="off">You've replaced <code>ng-src</code> with property bindings for the standard <code>src</code> property.</p></li><li><p translation-result="on">你在 <code>ng-class</code> 周围使用了属性绑定语法。虽然 Angular 中有一个 和 AngularJS 中<a href="guide/template-syntax#directives">非常相似的 <code>ngClass</code></a>指令， 但是它的值不会神奇的作为表达式进行计算。在 Angular 中，模板中的属性(Attribute)值总是被作为 属性(Property)表达式计算，而不是作为字符串字面量。</p><p translation-origin="off">You're using the property binding syntax around <code>ng-class</code>. Though Angular does have <a href="guide/template-syntax#directives">a very similar <code>ngClass</code></a>as AngularJS does, its value is not magically evaluated as an expression. In Angular, you always specify in the template when an attribute's value is a property expression, as opposed to a literal string.</p></li><li><p translation-result="on">你把 <code>ng-repeat</code> 替换成了 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code>。</p><p translation-origin="off">You've replaced <code>ng-repeat</code>s with <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code>s.</p></li><li><p translation-result="on">你把 <code>ng-click</code> 替换成了一个到标准 <code>click</code> 事件的绑定。</p><p translation-origin="off">You've replaced <code>ng-click</code> with an event binding for the standard <code>click</code>.</p></li><li><p translation-result="on">你把整个模板都包裹进了一个 <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code> 中，这导致只有当存在一个电话时它才会渲染。你必须这么做， 是因为组件首次加载时你还没有 <code>phone</code> 变量，这些表达式就会引用到一个不存在的值。 和 AngularJS 不同，当你尝试引用未定义对象上的属性时，Angular 中的表达式不会默默失败。 你必须明确指出这种情况是你所期望的。</p><p translation-origin="off">You've wrapped the whole template in an <code><a href="api/common/NgIf" class="code-anchor">ngIf</a></code> that causes it only to be rendered when there is a phone present. You need this because when the component first loads, you don't have <code>phone</code> yet and the expressions will refer to a non-existing value. Unlike in AngularJS, Angular expressions do not fail silently when you try to refer to properties on undefined objects. You need to be explicit about cases where this is expected.</p></li></ul><p translation-result="on">把 <code>PhoneDetailComponent</code> 组件添加到 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 的 <em>declarations</em> 和 <em>entryComponents</em> 中：</p><p translation-origin="off">Add <code>PhoneDetailComponent</code> component to the <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> <em>declarations</em> and <em>entryComponents</em>:</p><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="phonedetail" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a>, ], declarations: [ PhoneListComponent, PhoneDetailComponent, ], entryComponents: [ PhoneListComponent, PhoneDetailComponent ], providers: [ Phone, routeParamsProvider ] }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-detail/phone-detail.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">PhoneListComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">PhoneDetailComponent</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  entryComponents</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">PhoneListComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">PhoneDetailComponent</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln">
    routeParamsProvider
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'phonecatApp'</span><span class="pun">]);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">你现在应该从 <code>index.html</code> 中移除电话详情组件的&lt;script&gt;。</p><p translation-origin="off">You should now also remove the phone detail component &lt;script&gt; tag from <code>index.html</code>.</p><h4 id="add-the-checkmarkpipe" translation-result="on">添加 <em>CheckmarkPipe</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#add-the-checkmarkpipe"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="add-the-checkmarkpipe">Add the <em>CheckmarkPipe</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#add-the-checkmarkpipe"><i class="material-icons">link</i></a></h4><p translation-result="on">AngularJS 指令中有一个 <code>checkmark</code><em>过滤器</em>，把它转换成 Angular 的<strong>管道</strong>。</p><p translation-origin="off">The AngularJS directive had a <code>checkmark</code> <em>filter</em>. Turn that into an Angular <strong>pipe</strong>.</p><p translation-result="on">没有什么升级方法能把过滤器转换成管道。 但你也并不需要它。 把过滤器函数转换成等价的 Pipe 类非常简单。 实现方式和以前一样，但把它们包装进 <code>transform</code> 方法中就可以了。 把该文件改名成 <code>checkmark.pipe.ts</code>，以符合 Angular 中的命名约定：</p><p translation-origin="off">There is no upgrade method to convert filters into pipes. You won't miss it. It's easy to turn the filter function into an equivalent Pipe class. The implementation is the same as before, repackaged in the <code>transform</code> method. Rename the file to <code>checkmark.pipe.ts</code> to conform with Angular conventions:</p><code-example path="upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts" header="app/core/checkmark/checkmark.pipe.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Pipe" class="code-anchor">Pipe</a>, <a href="api/core/PipeTransform" class="code-anchor">PipeTransform</a> } from '@angular/core'; @<a href="api/core/Pipe" class="code-anchor">Pipe</a>({name: 'checkmark'}) export class CheckmarkPipe implements <a href="api/core/PipeTransform" class="code-anchor">PipeTransform</a> { transform(input: boolean) { return input ? '\u2713' : '\u2718'; } }</div><header class="ng-star-inserted">app/core/checkmark/checkmark.pipe.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/checkmark/checkmark.pipe.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Pipe" class="code-anchor"><span class="typ">Pipe</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/PipeTransform" class="code-anchor"><span class="typ">PipeTransform</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Pipe" class="code-anchor"><span class="lit">Pipe</span></a><span class="pun">({</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'checkmark'</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/PipeTransform" class="code-anchor"><span class="typ">PipeTransform</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  transform</span><span class="pun">(</span><span class="pln">input</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">boolean</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> input </span><span class="pun">?</span><span class="pln"> </span><span class="str">'\u2713'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'\u2718'</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">现在，导入并声明这个新创建的管道，同时从 <code>index.html</code> 文件中移除该过滤器的<code>&lt;script&gt;</code> 标签：</p><p translation-origin="off">Now import and declare the newly created pipe and remove the filter &lt;script&gt; tag from <code>index.html</code>:</p><code-example path="upgrade-phonecat-2-hybrid/app/app.module.ts" region="checkmarkpipe" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a>, ], declarations: [ PhoneListComponent, PhoneDetailComponent, CheckmarkPipe ], entryComponents: [ PhoneListComponent, PhoneDetailComponent ], providers: [ Phone, routeParamsProvider ] }) export class AppModule { constructor(private upgrade: <a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a>) { } ngDoBootstrap() { this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); } }</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./core/checkmark/checkmark.pipe'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">PhoneListComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">PhoneDetailComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">CheckmarkPipe</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  entryComponents</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">PhoneListComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">PhoneDetailComponent</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln">
    routeParamsProvider
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> upgrade</span><span class="pun">:</span><span class="pln"> </span><a href="api/upgrade/static/UpgradeModule" class="code-anchor"><span class="typ">UpgradeModule</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
  ngDoBootstrap</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">upgrade</span><span class="pun">.</span><span class="pln">bootstrap</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[</span><span class="str">'phonecatApp'</span><span class="pun">]);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h3 id="aot-compile-the-hybrid-app" translation-result="on">对混合式应用做 AOT 编译<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#aot-compile-the-hybrid-app"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="aot-compile-the-hybrid-app">AOT compile the hybrid app<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#aot-compile-the-hybrid-app"><i class="material-icons">link</i></a></h3><p translation-result="on">要在混合式应用中使用 AOT 编译，你首先要像其它 Angular 应用一样设置它，就像<a href="guide/aot-compiler">AOT 编译一章</a>所讲的那样。</p><p translation-origin="off">To use AOT with a hybrid app, you have to first set it up like any other Angular application, as shown in <a href="guide/aot-compiler">the Ahead-of-time Compilation chapter</a>.</p><p translation-result="on">然后修改 <code>main-aot.ts</code> 的引导代码，来引导 AOT 编译器所生成的 <code>AppComponentFactory</code>：</p><p translation-origin="off">Then change <code>main-aot.ts</code> to bootstrap the <code>AppComponentFactory</code> that was generated by the AOT compiler:</p><code-example path="upgrade-phonecat-2-hybrid/app/main-aot.ts" header="app/main-aot.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/platform-browser/platformBrowser" class="code-anchor">platformBrowser</a> } from '@angular/platform-browser'; import { AppModuleNgFactory } from './app.module.ngfactory'; <a href="api/platform-browser/platformBrowser" class="code-anchor">platformBrowser</a>().bootstrapModuleFactory(AppModuleNgFactory);</div><header class="ng-star-inserted">app/main-aot.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/main-aot.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/platformBrowser" class="code-anchor"><span class="pln">platformBrowser</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppModuleNgFactory</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.module.ngfactory'</span><span class="pun">;</span><span class="pln">

</span><a href="api/platform-browser/platformBrowser" class="code-anchor"><span class="pln">platformBrowser</span></a><span class="pun">().</span><span class="pln">bootstrapModuleFactory</span><span class="pun">(</span><span class="typ">AppModuleNgFactory</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">你还要把在 <code>index.html</code> 中已经用到的所有 AngularJS 文件加载到 <code>aot/index.html</code> 中：</p><p translation-origin="off">You need to load all the AngularJS files you already use in <code>index.html</code> in <code>aot/index.html</code> as well:</p><code-example path="upgrade-phonecat-2-hybrid/aot/index.html" header="aot/index.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;base href="/app/"&gt; &lt;title&gt;Google Phone Gallery&lt;/title&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt; &lt;link rel="stylesheet" href="app.css" /&gt; &lt;link rel="stylesheet" href="app.animations.css" /&gt; &lt;script src="https://code.jquery.com/jquery-2.2.4.js"&gt;&lt;/script&gt; &lt;script src="https://code.angularjs.org/1.5.5/angular.js"&gt;&lt;/script&gt; &lt;script src="https://code.angularjs.org/1.5.5/angular-animate.js"&gt;&lt;/script&gt; &lt;script src="https://code.angularjs.org/1.5.5/angular-resource.js"&gt;&lt;/script&gt; &lt;script src="https://code.angularjs.org/1.5.5/angular-route.js"&gt;&lt;/script&gt; &lt;script src="app.module.ajs.js"&gt;&lt;/script&gt; &lt;script src="app.config.js"&gt;&lt;/script&gt; &lt;script src="app.animations.js"&gt;&lt;/script&gt; &lt;script src="core/core.module.js"&gt;&lt;/script&gt; &lt;script src="core/phone/phone.module.js"&gt;&lt;/script&gt; &lt;script src="phone-list/phone-list.module.js"&gt;&lt;/script&gt; &lt;script src="phone-detail/phone-detail.module.js"&gt;&lt;/script&gt; &lt;script src="/node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt; &lt;script src="/node_modules/zone.js/dist/zone.min.js"&gt;&lt;/script&gt; &lt;script&gt;window.module = 'aot';&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="view-container"&gt; &lt;div ng-view class="view-frame"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script src="/dist/build.js"&gt;&lt;/script&gt; &lt;/html&gt;</div><header class="ng-star-inserted">aot/index.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from aot/index.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="dec">&lt;!doctype html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">

    </span><span class="tag">&lt;base</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/app/"</span><span class="tag">&gt;</span><span class="pln">

    </span><span class="tag">&lt;title&gt;</span><span class="pln">Google Phone Gallery</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"app.css"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"app.animations.css"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">

    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.jquery.com/jquery-2.2.4.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.angularjs.org/1.5.5/angular.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.angularjs.org/1.5.5/angular-animate.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.angularjs.org/1.5.5/angular-resource.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.angularjs.org/1.5.5/angular-route.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">

    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"app.module.ajs.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"app.config.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"app.animations.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"core/core.module.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"core/phone/phone.module.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"phone-list/phone-list.module.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"phone-detail/phone-detail.module.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">

    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/node_modules/core-js/client/shim.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/node_modules/zone.js/dist/zone.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">

    </span><span class="tag">&lt;script&gt;</span><span class="pln">window</span><span class="pun">.</span><span class="pln">module </span><span class="pun">=</span><span class="pln"> </span><span class="str">'aot'</span><span class="pun">;</span><span class="tag">&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;/head&gt;</span><span class="pln">

  </span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"view-container"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">ng-view</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"view-frame"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/body&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/dist/build.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这些文件要带着相应的腻子脚本复制到一起。应用运行时需要的文件，比如电话列表 <code>.json</code> 和图片，也需要复制过去。</p><p translation-origin="off">These files need to be copied together with the polyfills. The files the application needs at runtime, like the <code>.json</code> phone lists and images, also need to be copied.</p><p translation-result="on">通过 <code>npm install fs-extra --save-dev</code> 安装 <code>fs-extra</code> 可以更好的复制文件，并且把 <code>copy-dist-files.js</code> 文件改成这样：</p><p translation-origin="off">Install <code>fs-extra</code> via <code>npm install fs-extra --save-dev</code> for better file copying, and change <code>copy-dist-files.js</code> to the following:</p><code-example path="upgrade-phonecat-2-hybrid/copy-dist-files.js" header="copy-dist-files.js" ng-version="9.0.0-rc.11"><div style="display:none">var fsExtra = require('fs-extra'); var resources = [ // polyfills 'node_modules/core-js/client/shim.min.js', 'node_modules/zone.js/dist/zone.min.js', // css 'app/app.css', 'app/app.animations.css', // images and json files 'app/img/', 'app/phones/', // app files 'app/app.module.ajs.js', 'app/app.config.js', 'app/app.animations.js', 'app/core/core.module.js', 'app/core/phone/phone.module.js', 'app/phone-list/phone-list.module.js', 'app/phone-detail/phone-detail.module.js' ]; resources.map(function(sourcePath) { var destPath = `aot/${sourcePath}`; fsExtra.copySync(sourcePath, destPath); });</div><header class="ng-star-inserted">copy-dist-files.js</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from copy-dist-files.js">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">var</span><span class="pln"> fsExtra </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">require</span><span class="pun">(</span><span class="str">'fs-extra'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> resources </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="com">// polyfills</span><span class="pln">
  </span><span class="str">'node_modules/core-js/client/shim.min.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'node_modules/zone.js/dist/zone.min.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="com">// css</span><span class="pln">
  </span><span class="str">'app/app.css'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'app/app.animations.css'</span><span class="pun">,</span><span class="pln">
  </span><span class="com">// images and json files</span><span class="pln">
  </span><span class="str">'app/img/'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'app/phones/'</span><span class="pun">,</span><span class="pln">
  </span><span class="com">// app files</span><span class="pln">
  </span><span class="str">'app/app.module.ajs.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'app/app.config.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'app/app.animations.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'app/core/core.module.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'app/core/phone/phone.module.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'app/phone-list/phone-list.module.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">'app/phone-detail/phone-detail.module.js'</span><span class="pln">
</span><span class="pun">];</span><span class="pln">
resources</span><span class="pun">.</span><span class="pln">map</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">sourcePath</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> destPath </span><span class="pun">=</span><span class="pln"> </span><span class="str">`aot/${sourcePath}`</span><span class="pun">;</span><span class="pln">
  fsExtra</span><span class="pun">.</span><span class="pln">copySync</span><span class="pun">(</span><span class="pln">sourcePath</span><span class="pun">,</span><span class="pln"> destPath</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">这就是想要在升级应用期间 AOT 编译所需的一切！</p><p translation-origin="off">And that's all you need to use AOT while upgrading your app!</p><h3 id="adding-the-angular-router-and-bootstrap" translation-result="on">添加 Angular 路由器和引导程序<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#adding-the-angular-router-and-bootstrap"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="adding-the-angular-router-and-bootstrap">Adding The Angular Router And Bootstrap<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#adding-the-angular-router-and-bootstrap"><i class="material-icons">link</i></a></h3><p translation-result="on">此刻，你已经把所有 AngularJS 的组件替换成了它们在 Angular 中的等价物，不过你仍然在 AngularJS 路由器中使用它们。</p><p translation-origin="off">At this point, you've replaced all AngularJS application components with their Angular counterparts, even though you're still serving them from the AngularJS router.</p><h4 id="add-the-angular-router" translation-result="on">添加 Angular 路由器<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#add-the-angular-router"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="add-the-angular-router">Add the Angular router<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#add-the-angular-router"><i class="material-icons">link</i></a></h4><p translation-result="on">Angular 有一个<a href="guide/router">全新的路由器</a>。</p><p translation-origin="off">Angular has an <a href="guide/router">all-new router</a>.</p><p translation-result="on">像所有的路由器一样，它需要在 UI 中指定一个位置来显示路由的视图。 在 Angular 中，它是 <code>&lt;<a href="api/router/RouterOutlet" class="code-anchor">router-outlet</a>&gt;</code>，并位于应用组件树顶部的<em>根组件</em>中。</p><p translation-origin="off">Like all routers, it needs a place in the UI to display routed views. For Angular that's the <code>&lt;<a href="api/router/RouterOutlet" class="code-anchor">router-outlet</a>&gt;</code> and it belongs in a <em>root component</em> at the top of the applications component tree.</p><p translation-result="on">你还没有这样一个根组件，因为该应用仍然是像一个 AngularJS 应用那样被管理的。 创建新的 <code>app.component.ts</code> 文件，放入像这样的 <code>AppComponent</code> 类：</p><p translation-origin="off">You don't yet have such a root component, because the app is still managed as an AngularJS app. Create a new <code>app.component.ts</code> file with the following <code>AppComponent</code> class:</p><code-example path="upgrade-phonecat-3-final/app/app.component.ts" header="app/app.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'phonecat-app', template: '&lt;<a href="api/router/RouterOutlet" class="code-anchor">router-outlet</a>&gt;&lt;/<a href="api/router/RouterOutlet" class="code-anchor">router-outlet</a>&gt;' }) export class AppComponent { }</div><header class="ng-star-inserted">app/app.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/app.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phonecat-app'</span><span class="pun">,</span><span class="pln">
  </span><span class="kwd">template</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;</span><a href="api/router/RouterOutlet" class="code-anchor"><span class="str">router-outlet</span></a><span class="str">&gt;&lt;/</span><a href="api/router/RouterOutlet" class="code-anchor"><span class="str">router-outlet</span></a><span class="str">&gt;'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">它有一个很简单的模板，只包含 Angular 路由的 <code>&lt;<a href="api/router/RouterOutlet" class="code-anchor">router-outlet</a>&gt;</code>。 该组件只负责渲染活动路由的内容，此外啥也不干。</p><p translation-origin="off">It has a simple template that only includes the <code>&lt;<a href="api/router/RouterOutlet" class="code-anchor">router-outlet</a>&gt;</code>. This component just renders the contents of the active route and nothing else.</p><p translation-result="on">该选择器告诉 Angular：当应用启动时就把这个根组件插入到宿主页面的 <code>&lt;phonecat-app&gt;</code> 元素中。</p><p translation-origin="off">The selector tells Angular to plug this root component into the <code>&lt;phonecat-app&gt;</code> element on the host web page when the application launches.</p><p translation-result="on">把这个 <code>&lt;phonecat-app&gt;</code> 元素插入到 <code>index.html</code> 中。 用它来代替 AngularJS 中的 <code>ng-view</code> 指令：</p><p translation-origin="off">Add this <code>&lt;phonecat-app&gt;</code> element to the <code>index.html</code>. It replaces the old AngularJS <code>ng-view</code> directive:</p><code-example path="upgrade-phonecat-3-final/index.html" region="appcomponent" header="index.html (body)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;body&gt; &lt;phonecat-app&gt;&lt;/phonecat-app&gt; &lt;/body&gt;</div><header class="ng-star-inserted">index.html (body)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from index.html (body)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;body&gt;</span><span class="pln">
  </span><span class="tag">&lt;phonecat-app&gt;&lt;/phonecat-app&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span></code>
    </pre></aio-code></code-example><h4 id="create-the-routing-module" translation-result="on">创建<em>路由模块</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#create-the-routing-module"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="create-the-routing-module">Create the <em>Routing Module</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#create-the-routing-module"><i class="material-icons">link</i></a></h4><p translation-result="on">无论在 AngularJS 还是 Angular 或其它框架中，路由器都需要进行配置。</p><p translation-origin="off">A router needs configuration whether it's the AngularJS or Angular or any other router.</p><p translation-result="on">Angular 路由器配置的详情最好去查阅下<a href="guide/router">路由与导航</a>文档。 它建议你创建一个专们用于路由器配置的 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code>（名叫<em>路由模块</em>）。</p><p translation-origin="off">The details of Angular router configuration are best left to the <a href="guide/router">Routing documentation</a> which recommends that you create a <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> dedicated to router configuration (called a <em>Routing Module</em>).</p><code-example path="upgrade-phonecat-3-final/app/app-routing.module.ts" header="app/app-routing.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/router/Routes" class="code-anchor">Routes</a>, <a href="api/router/RouterModule" class="code-anchor">RouterModule</a> } from '@angular/router'; import { <a href="api/common/APP_BASE_HREF" class="code-anchor">APP_BASE_HREF</a>, <a href="api/common/HashLocationStrategy" class="code-anchor">HashLocationStrategy</a>, <a href="api/common/LocationStrategy" class="code-anchor">LocationStrategy</a> } from '@angular/common'; import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; import { PhoneListComponent } from './phone-list/phone-list.component'; const routes: <a href="api/router/Routes" class="code-anchor">Routes</a> = [ { path: '', <a href="api/router/Route#redirectTo" class="code-anchor">redirectTo</a>: 'phones', <a href="api/router/Route#pathMatch" class="code-anchor">pathMatch</a>: '<a href="api/core/Version#full" class="code-anchor">full</a>' }, { path: 'phones', component: PhoneListComponent }, { path: 'phones/:phoneId', component: PhoneDetailComponent } ]; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ RouterModule.forRoot(routes) ], exports: [ <a href="api/router/RouterModule" class="code-anchor">RouterModule</a> ], providers: [ { provide: <a href="api/common/APP_BASE_HREF" class="code-anchor">APP_BASE_HREF</a>, <a href="api/core/ValueSansProvider#useValue" class="code-anchor">useValue</a>: '!' }, { provide: <a href="api/common/LocationStrategy" class="code-anchor">LocationStrategy</a>, useClass: <a href="api/common/HashLocationStrategy" class="code-anchor">HashLocationStrategy</a> }, ] }) export class AppRoutingModule { }</div><header class="ng-star-inserted">app/app-routing.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/app-routing.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/Routes" class="code-anchor"><span class="typ">Routes</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/router/RouterModule" class="code-anchor"><span class="typ">RouterModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/APP_BASE_HREF" class="code-anchor"><span class="pln">APP_BASE_HREF</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/common/HashLocationStrategy" class="code-anchor"><span class="typ">HashLocationStrategy</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/common/LocationStrategy" class="code-anchor"><span class="typ">LocationStrategy</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-detail/phone-detail.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">   </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-list/phone-list.component'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">const</span><span class="pln"> routes</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/Routes" class="code-anchor"><span class="typ">Routes</span></a><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> </span><a href="api/router/Route#redirectTo" class="code-anchor"><span class="pln">redirectTo</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'phones'</span><span class="pun">,</span><span class="pln"> </span><a href="api/router/Route#pathMatch" class="code-anchor"><span class="pln">pathMatch</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'</span><a href="api/core/Version#full" class="code-anchor"><span class="str">full</span></a><span class="str">'</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phones'</span><span class="pun">,</span><span class="pln">          component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phones/:phoneId'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">];</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">RouterModule</span><span class="pun">.</span><span class="pln">forRoot</span><span class="pun">(</span><span class="pln">routes</span><span class="pun">)</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  exports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><a href="api/router/RouterModule" class="code-anchor"><span class="typ">RouterModule</span></a><span class="pln"> </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/APP_BASE_HREF" class="code-anchor"><span class="pln">APP_BASE_HREF</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ValueSansProvider#useValue" class="code-anchor"><span class="pln">useValue</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'!'</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
    </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/LocationStrategy" class="code-anchor"><span class="typ">LocationStrategy</span></a><span class="pun">,</span><span class="pln"> useClass</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/HashLocationStrategy" class="code-anchor"><span class="typ">HashLocationStrategy</span></a><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppRoutingModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">该模块定义了一个 <code>routes</code> 对象，它带有两个路由，分别指向两个电话组件，以及为空路径指定的默认路由。 它把 <code>routes</code> 传给 <code>RouterModule.forRoot</code> 方法，该方法会完成剩下的事。</p><p translation-origin="off">This module defines a <code>routes</code> object with two routes to the two phone components and a default route for the empty path. It passes the <code>routes</code> to the <code>RouterModule.forRoot</code> method which does the rest.</p><p translation-result="on">一些额外的提供商让路由器使用“hash”策略解析 URL，比如 <code>#!/phones</code>，而不是默认的“Push State”策略。</p><p translation-origin="off">A couple of extra providers enable routing with "hash" URLs such as <code>#!/phones</code> instead of the default "push state" strategy.</p><p translation-result="on">现在，修改 <code>AppModule</code>，让它导入这个 <code>AppRoutingModule</code>，并同时声明根组件 <code>AppComponent</code>。 这会告诉 Angular，它应该使用根组件 <code>AppComponent</code> 引导应用，并把它的视图插入到宿主页面中。</p><p translation-origin="off">Now update the <code>AppModule</code> to import this <code>AppRoutingModule</code> and also the declare the root <code>AppComponent</code> as the bootstrap component. That tells Angular that it should bootstrap the app with the <em>root</em> <code>AppComponent</code> and insert its view into the host web page.</p><p translation-result="on">你还要从 <code>app.module.ts</code> 中移除调用 <code>ngDoBootstrap()</code> 来引导 AngularJS 模块的代码，以及对 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 的导入代码。</p><p translation-origin="off">You must also remove the bootstrap of the AngularJS module from <code>ngDoBootstrap()</code> in <code>app.module.ts</code> and the <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> import.</p><code-example path="upgrade-phonecat-3-final/app/app.module.ts" header="app/app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a> } from '@angular/forms'; import { <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; import { Phone } from './core/phone/phone.service'; import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; import { PhoneListComponent } from './phone-list/phone-list.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, AppRoutingModule ], declarations: [ AppComponent, PhoneListComponent, CheckmarkPipe, PhoneDetailComponent ], providers: [ Phone ], bootstrap: [ AppComponent ] }) export class AppModule {}</div><header class="ng-star-inserted">app/app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/forms'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppRoutingModule</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app-routing.module'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">     </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pln"> </span><span class="pun">}</span><span class="pln">    </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./core/checkmark/checkmark.pipe'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pln"> </span><span class="pun">}</span><span class="pln">            </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./core/phone/phone.service'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-detail/phone-detail.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">   </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-list/phone-list.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
    </span><span class="typ">AppRoutingModule</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">AppComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">PhoneListComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">CheckmarkPipe</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">PhoneDetailComponent</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">Phone</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  bootstrap</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{}</span></code>
    </pre></aio-code></code-example><p translation-result="on">而且，由于你现在直接路由到 <code>PhoneListComponent</code> 和 <code>PhoneDetailComponent</code>，而不再使用带 <code>&lt;phone-list&gt;</code> 或 <code>&lt;phone-detail&gt;</code> 标签的路由模板，因此你同样不再需要它们的 Angular 选择器。</p><p translation-origin="off">And since you are routing to <code>PhoneListComponent</code> and <code>PhoneDetailComponent</code> directly rather than using a route template with a <code>&lt;phone-list&gt;</code> or <code>&lt;phone-detail&gt;</code> tag, you can do away with their Angular selectors as well.</p><h4 id="generate-links-for-each-phone" translation-result="on">为每个电话生成链接<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#generate-links-for-each-phone"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="generate-links-for-each-phone">Generate links for each phone<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#generate-links-for-each-phone"><i class="material-icons">link</i></a></h4><p translation-result="on">在电话列表中，你不用再被迫硬编码电话详情的链接了。 你可以通过把每个电话的 <code>id</code> 绑定到 <code><a href="api/router/RouterLink" class="code-anchor">routerLink</a></code> 指令来生成它们了，该指令的构造函数会为 <code>PhoneDetailComponent</code> 生成正确的 URL：</p><p translation-origin="off">You no longer have to hardcode the links to phone details in the phone list. You can generate data bindings for each phone's <code>id</code> to the <code><a href="api/router/RouterLink" class="code-anchor">routerLink</a></code> directive and let that directive construct the appropriate URL to the <code>PhoneDetailComponent</code>:</p><code-example path="upgrade-phonecat-3-final/app/phone-list/phone-list.template.html" region="list" header="app/phone-list/phone-list.template.html (list with links)" ng-version="9.0.0-rc.11"><div style="display:none">&lt;ul class="phones"&gt; &lt;li *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let phone of getPhones()" class="thumbnail phone-list-item"&gt; &lt;a [<a href="api/router/RouterLink" class="code-anchor">routerLink</a>]="['/phones', phone.id]" class="thumb"&gt; &lt;img [src]="phone.imageUrl" [alt]="phone.name" /&gt; &lt;/a&gt; &lt;a [<a href="api/router/RouterLink" class="code-anchor">routerLink</a>]="['/phones', phone.id]" class="name"&gt;{{phone.name}}&lt;/a&gt; &lt;p&gt;{{phone.snippet}}&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt;</div><header class="ng-star-inserted">app/phone-list/phone-list.template.html (list with links)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.template.html (list with links)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"phones"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let phone of getPhones()"</span><span class="pln">
      </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"thumbnail phone-list-item"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> [</span><a href="api/router/RouterLink" class="code-anchor"><span class="atn">routerLink</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"['/phones', phone.id]"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"thumb"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"phone.imageUrl"</span><span class="pln"> [</span><span class="atn">alt</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"phone.name"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> [</span><a href="api/router/RouterLink" class="code-anchor"><span class="atn">routerLink</span></a><span class="pln">]</span><span class="pun">=</span><span class="atv">"['/phones', phone.id]"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"name"</span><span class="tag">&gt;</span><span class="pln">{{phone.name}}</span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">{{phone.snippet}}</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">要了解详情，请查看<a href="guide/router">路由与导航</a>页。</p><p translation-origin="off">See the <a href="guide/router">Routing</a> page for details.</p></div><br><h4 id="use-route-parameters" translation-result="on">使用路由参数<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#use-route-parameters"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="use-route-parameters">Use route parameters<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#use-route-parameters"><i class="material-icons">link</i></a></h4><p translation-result="on">Angular 路由器会传入不同的路由参数。 改正 <code>PhoneDetail</code> 组件的构造函数，让它改用注入进来的 <code><a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a></code> 对象。 从 <code>ActivatedRoute.snapshot.params</code> 中提取出 <code>phoneId</code>，并像以前一样获取手机的数据：</p><p translation-origin="off">The Angular router passes route parameters differently. Correct the <code>PhoneDetail</code> component constructor to expect an injected <code><a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a></code> object. Extract the <code>phoneId</code> from the <code>ActivatedRoute.snapshot.params</code> and fetch the phone data as before:</p><code-example path="upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts" header="app/phone-detail/phone-detail.component.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a> } from '@angular/router'; import { Phone, PhoneData } from '../core/phone/phone.service'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'phone-detail', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './phone-detail.template.html' }) export class PhoneDetailComponent { phone: PhoneData; mainImageUrl: string; constructor(<a href="api/router/RouterOutlet#activatedRoute" class="code-anchor">activatedRoute</a>: <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a>, phone: Phone) { phone.get(activatedRoute.snapshot.paramMap.get('phoneId')) .subscribe((p: PhoneData) =&gt; { this.phone = p; this.setImage(p.images[0]); }); } setImage(imageUrl: string) { this.mainImageUrl = imageUrl; } }</div><header class="ng-star-inserted">app/phone-detail/phone-detail.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-detail/phone-detail.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln">      </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/phone/phone.service'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phone-detail'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./phone-detail.template.html'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">;</span><span class="pln">
  mainImageUrl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><a href="api/router/RouterOutlet#activatedRoute" class="code-anchor"><span class="pln">activatedRoute</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pun">,</span><span class="pln"> phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    phone</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">activatedRoute</span><span class="pun">.</span><span class="pln">snapshot</span><span class="pun">.</span><span class="pln">paramMap</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'phoneId'</span><span class="pun">))</span><span class="pln">
      </span><span class="pun">.</span><span class="pln">subscribe</span><span class="pun">((</span><span class="pln">p</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">phone </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">setImage</span><span class="pun">(</span><span class="pln">p</span><span class="pun">.</span><span class="pln">images</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span><span class="pln">
      </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  setImage</span><span class="pun">(</span><span class="pln">imageUrl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">mainImageUrl </span><span class="pun">=</span><span class="pln"> imageUrl</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">你现在运行的就是纯正的 Angular 应用了！</p><p translation-origin="off">You are now running a pure Angular application!</p><h3 id="say-goodbye-to-angularjs" translation-result="on">再见，AngularJS！<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#say-goodbye-to-angularjs"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="say-goodbye-to-angularjs">Say Goodbye to AngularJS<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#say-goodbye-to-angularjs"><i class="material-icons">link</i></a></h3><p translation-result="on">终于可以把辅助训练的轮子摘下来了！让你的应用作为一个纯粹、闪亮的 Angular 程序开始它的新生命吧。 剩下的所有任务就是移除代码 —— 这当然是每个程序员最喜欢的任务！</p><p translation-origin="off">It is time to take off the training wheels and let the application begin its new life as a pure, shiny Angular app. The remaining tasks all have to do with removing code - which of course is every programmer's favorite task!</p><p translation-result="on">应用仍然以混合式应用的方式启动，然而这再也没有必要了。</p><p translation-origin="off">The application is still bootstrapped as a hybrid app. There's no need for that anymore.</p><p translation-result="on">把应用的引导（<code>bootstrap</code>）方法从 <code><a href="api/upgrade/UpgradeAdapter" class="code-anchor">UpgradeAdapter</a></code> 的改为 Angular 的。</p><p translation-origin="off">Switch the bootstrap method of the application from the <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> to the Angular way.</p><code-example path="upgrade-phonecat-3-final/app/main.ts" header="main.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a>().bootstrapModule(AppModule);</div><header class="ng-star-inserted">main.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from main.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser-dynamic'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.module'</span><span class="pun">;</span><span class="pln">

</span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pun">().</span><span class="pln">bootstrapModule</span><span class="pun">(</span><span class="typ">AppModule</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果你还没有这么做，请从 <code>app.module.ts 删除所有</code>UpgradeModule 的引用， 以及所有用于 AngularJS 服务的<a href="guide/upgrade#making-angularjs-dependencies-injectable-to-angular">工厂供应商（factory provider）</a>和 <code>app/ajs-upgraded-providers.ts</code> 文件。</p><p translation-origin="off">If you haven't already, remove all references to the <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> from <code>app.module.ts</code>, as well as any <a href="guide/upgrade#making-angularjs-dependencies-injectable-to-angular">factory provider</a> for AngularJS services, and the <code>app/ajs-upgraded-providers.ts</code> file.</p><p translation-result="on">还要删除所有的 <code><a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a>()</code> 或 <code><a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>()</code> 以及与 AngularJS 相关的工厂或指令声明。 因为你不再需要降级任何组件了，也不再需要把它们列在 <code>entryComponents</code> 中。</p><p translation-origin="off">Also remove any <code><a href="api/upgrade/static/downgradeInjectable" class="code-anchor">downgradeInjectable</a>()</code> or <code><a href="api/upgrade/static/downgradeComponent" class="code-anchor">downgradeComponent</a>()</code> you find, together with the associated AngularJS factory or directive declarations. Since you no longer have downgraded components, you no longer list them in <code>entryComponents</code>.</p><code-example path="upgrade-phonecat-3-final/app/app.module.ts" header="app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a> } from '@angular/forms'; import { <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; import { Phone } from './core/phone/phone.service'; import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; import { PhoneListComponent } from './phone-list/phone-list.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, AppRoutingModule ], declarations: [ AppComponent, PhoneListComponent, CheckmarkPipe, PhoneDetailComponent ], providers: [ Phone ], bootstrap: [ AppComponent ] }) export class AppModule {}</div><header class="ng-star-inserted">app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/forms'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppRoutingModule</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app-routing.module'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">     </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pln"> </span><span class="pun">}</span><span class="pln">    </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./core/checkmark/checkmark.pipe'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pln"> </span><span class="pun">}</span><span class="pln">            </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./core/phone/phone.service'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-detail/phone-detail.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">   </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-list/phone-list.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
    </span><span class="typ">AppRoutingModule</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">AppComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">PhoneListComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">CheckmarkPipe</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">PhoneDetailComponent</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">Phone</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  bootstrap</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{}</span></code>
    </pre></aio-code></code-example><p translation-result="on">你还要完全移除了下列文件。它们是 AngularJS 的模块配置文件和类型定义文件，在 Angular 中不需要了：</p><p translation-origin="off">You may also completely remove the following files. They are AngularJS module configuration files and not needed in Angular:</p><ul><li><p><code>app/app.module.ajs.ts</code></p></li><li><p><code>app/app.config.ts</code></p></li><li><p><code>app/core/core.module.ts</code></p></li><li><p><code>app/core/phone/phone.module.ts</code></p></li><li><p><code>app/phone-detail/phone-detail.module.ts</code></p></li><li><p><code>app/phone-list/phone-list.module.ts</code></p></li></ul><p translation-result="on">还需要卸载 AngularJS 的外部类型定义文件。你现在只需要留下 Jasmine 和 Angular 所需的腻子脚本。 <code>systemjs.config.js</code> 中的 <code>@angular/upgrade</code> 包及其映射也可以移除了。</p><p translation-origin="off">The external typings for AngularJS may be uninstalled as well. The only ones you still need are for Jasmine and Angular polyfills. The <code>@angular/upgrade</code> package and its mapping in <code>systemjs.config.js</code> can also go.</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">npm uninstall @angular/upgrade --save npm uninstall @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">npm uninstall </span><span class="lit">@angular</span><span class="pun">/</span><span class="pln">upgrade </span><span class="pun">--</span><span class="pln">save
npm uninstall </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">animate </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">cookies </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">mocks </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">resource </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">route </span><span class="lit">@types</span><span class="pun">/</span><span class="pln">angular</span><span class="pun">-</span><span class="pln">sanitize </span><span class="pun">--</span><span class="pln">save</span><span class="pun">-</span><span class="pln">dev</span></code>
    </pre></aio-code></code-example><p translation-result="on">最后，从 <code>index.html</code> 和 <code>karma.conf.js</code> 中，移除所有对 AngularJS 和 jQuery 脚本的引用。 当这些全部做完时，<code>index.html</code> 应该是这样的：</p><p translation-origin="off">Finally, from <code>index.html</code>, remove all references to AngularJS scripts and jQuery. When you're done, this is what it should look like:</p><code-example path="upgrade-phonecat-3-final/index.html" region="full" header="index.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;base href="/app/"&gt; &lt;title&gt;Google Phone Gallery&lt;/title&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt; &lt;link rel="stylesheet" href="app.css" /&gt; &lt;script src="/node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt; &lt;script src="/node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt; &lt;script src="/node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt; &lt;script src="/systemjs.config.js"&gt;&lt;/script&gt; &lt;script&gt; System.import('/app'); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;phonecat-app&gt;&lt;/phonecat-app&gt; &lt;/body&gt; &lt;/html&gt;</div><header class="ng-star-inserted">index.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from index.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="dec">&lt;!doctype html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;base</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/app/"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">Google Phone Gallery</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"app.css"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">

    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/node_modules/core-js/client/shim.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/node_modules/zone.js/dist/zone.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/node_modules/systemjs/dist/system.src.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/systemjs.config.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script&gt;</span><span class="pln">
      </span><span class="typ">System</span><span class="pun">.</span><span class="kwd">import</span><span class="pun">(</span><span class="str">'/app'</span><span class="pun">);</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;/head&gt;</span><span class="pln">
  </span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;phonecat-app&gt;&lt;/phonecat-app&gt;</span><span class="pln">
  </span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这是你最后一次看到 AngularJS 了！它曾经带给你很多帮助，不过现在，该说再见了。</p><p translation-origin="off">That is the last you'll see of AngularJS! It has served us well but now it's time to say goodbye.</p><h2 id="appendix-upgrading-phonecat-tests" translation-result="on">附录：升级 PhoneCat 的测试<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#appendix-upgrading-phonecat-tests"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="appendix-upgrading-phonecat-tests">Appendix: Upgrading PhoneCat Tests<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#appendix-upgrading-phonecat-tests"><i class="material-icons">link</i></a></h2><p translation-result="on">测试不仅要在升级过程中被保留，它还是确保应用在升级过程中不会被破坏的一个安全指示器。 要达到这个目的，E2E 测试尤其有用。</p><p translation-origin="off">Tests can not only be retained through an upgrade process, but they can also be used as a valuable safety measure when ensuring that the application does not break during the upgrade. E2E tests are especially useful for this purpose.</p><h3 id="e2e-tests" translation-result="on">E2E 测试<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#e2e-tests"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="e2e-tests">E2E Tests<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#e2e-tests"><i class="material-icons">link</i></a></h3><p translation-result="on">PhoneCat 项目中同时有基于 Protractor 的 E2E 测试和一些基于 Karma 的单元测试。 对这两者来说，E2E 测试的转换要容易得多：根据定义，E2E 测试通过与应用中显示的这些 UI 元素互动，从<em>外部</em>访问你的应用来进行测试。 E2E 测试实际上并不关心这些应用中各部件的内部结构。这也意味着，虽然你已经修改了此应用程序， 但是 E2E 测试套件仍然应该能像以前一样全部通过。因为从用户的角度来说，你并没有改变应用的行为。</p><p translation-origin="off">The PhoneCat project has both E2E Protractor tests and some Karma unit tests in it. Of these two, E2E tests can be dealt with much more easily: By definition, E2E tests access the application from the <em>outside</em> by interacting with the various UI elements the app puts on the screen. E2E tests aren't really that concerned with the internal structure of the application components. That also means that, although you modify the project quite a bit during the upgrade, the E2E test suite should keep passing with just minor modifications. You didn't change how the application behaves from the user's point of view.</p><p translation-result="on">在转成 TypeScript 期间，你不用做什么就能让 E2E 测试正常工作。 但是当你想改成按照混合式应用进行引导时，必须做一些修改。</p><p translation-origin="off">During TypeScript conversion, there is nothing to do to keep E2E tests working. But when you change the bootstrap to that of a Hybrid app, you must make a few changes.</p><p translation-result="on">再对 <code>protractor-conf.js</code> 做下列修改，与混合应用同步：</p><p translation-origin="off">Update the <code>protractor-conf.js</code> to sync with hybrid apps:</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">ng12Hybrid: true</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng12Hybrid</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span></code>
    </pre></aio-code></code-example><p translation-result="on">当你开始组件和模块升级到 Angular 时，还需要一系列后续的修改。 这是因为 E2E 测试有一些匹配器是 AngularJS 中特有的。对于 PhoneCat 来说，为了让它能在 Angular 下工作，你得做下列修改：</p><p translation-origin="off">When you start to upgrade components and their templates to Angular, you'll make more changes because the E2E tests have matchers that are specific to AngularJS. For PhoneCat you need to make the following changes in order to make things work with Angular:</p><table><tbody><tr><th><p translation-result="on">老代码</p><p translation-origin="off">Previous code</p></th><th><p translation-result="on">新代码</p><p translation-origin="off">New code</p></th><th><p translation-result="on">说明</p><p translation-origin="off">Notes</p></th></tr><tr><td><p> <code>by.repeater('phone in $ctrl.phones').column('phone.name')</code></p></td><td><p> <code>by.css('.phones .name')</code></p></td><td><p translation-result="on">repeater 匹配器依赖于 AngularJS 中的 <code>ng-repeat</code></p><p translation-origin="off">The repeater matcher relies on AngularJS <code>ng-repeat</code></p></td></tr><tr><td><p> <code>by.repeater('phone in $ctrl.phones')</code></p></td><td><p> <code>by.css('.phones li')</code></p></td><td><p translation-result="on">repeater 匹配器依赖于 AngularJS 中的 <code>ng-repeat</code></p><p translation-origin="off">The repeater matcher relies on AngularJS <code>ng-repeat</code></p></td></tr><tr><td><p> <code>by.model('$ctrl.query')</code></p></td><td><p> <code>by.css('input')</code></p></td><td><p translation-result="on">model 匹配器依赖于 AngularJS 中的 <code>ng-model</code></p><p translation-origin="off">The model matcher relies on AngularJS <code>ng-model</code></p></td></tr><tr><td><p> <code>by.model('$ctrl.orderProp')</code></p></td><td><p> <code>by.css('select')</code></p></td><td><p translation-result="on">model 匹配器依赖于 AngularJS 中的 <code>ng-model</code></p><p translation-origin="off">The model matcher relies on AngularJS <code>ng-model</code></p></td></tr><tr><td><p> <code>by.binding('$ctrl.phone.name')</code></p></td><td><p> <code>by.css('h1')</code></p></td><td><p translation-result="on">binding 匹配器依赖于 AngularJS 的数据绑定</p><p translation-origin="off">The binding matcher relies on AngularJS data binding</p></td></tr></tbody></table><p translation-result="on">当引导方式从 <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> 切换到纯 Angular 的时，AngularJS 就从页面中完全消失了。 此时，你需要告诉 Protractor，它不用再找 AngularJS 应用了，而是从页面中查找 <em>Angular</em> 应用。 于是在 <code>protractor-conf.js</code> 中做下列修改：</p><p translation-origin="off">When the bootstrap method is switched from that of <code><a href="api/upgrade/static/UpgradeModule" class="code-anchor">UpgradeModule</a></code> to pure Angular, AngularJS ceases to exist on the page completely. At this point, you need to tell Protractor that it should not be looking for an AngularJS app anymore, but instead it should find <em>Angular apps</em> from the page.</p><p translation-result="on">替换之前在 <code>protractor-conf.js</code> 中加入 <code>ng12Hybrid</code>，象这样：</p><p translation-origin="off">Replace the <code>ng12Hybrid</code> previously added with the following in <code>protractor-conf.js</code>:</p><code-example format="" ng-version="9.0.0-rc.11"><div style="display:none">useAllAngular2AppRoots: true,</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">useAllAngular2AppRoots</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code>
    </pre></aio-code></code-example><p translation-result="on">同样，<code>PhoneCat</code> 的测试代码中有两个 Protractor API 调用内部使用了 AngularJS 的 <code>$location</code>。该服务没有了， 你就得把这些调用用一个 WebDriver 的通用 URL API 代替。第一个 API 是“重定向(redirect)”规约：</p><p translation-origin="off">Also, there are a couple of Protractor API calls in the PhoneCat test code that are using the AngularJS <code>$location</code> service under the hood. As that service is no longer present after the upgrade, replace those calls with ones that use WebDriver's generic URL APIs instead. The first of these is the redirection spec:</p><code-example path="upgrade-phonecat-3-final/e2e-spec.ts" region="redirect" header="e2e-tests/scenarios.ts" ng-version="9.0.0-rc.11"><div style="display:none">it('should redirect `index.html` to `index.html#!/phones', function() { browser.get('index.html'); browser.waitForAngular(); browser.getCurrentUrl().then(function(url: string) { expect(url.endsWith('/phones')).toBe(true); }); });</div><header class="ng-star-inserted">e2e-tests/scenarios.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from e2e-tests/scenarios.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">it</span><span class="pun">(</span><span class="str">'should redirect `index.html` to `index.html#!/phones'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  browser</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'index.html'</span><span class="pun">);</span><span class="pln">
  browser</span><span class="pun">.</span><span class="pln">waitForAngular</span><span class="pun">();</span><span class="pln">
  browser</span><span class="pun">.</span><span class="pln">getCurrentUrl</span><span class="pun">().</span><span class="kwd">then</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">url</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">url</span><span class="pun">.</span><span class="pln">endsWith</span><span class="pun">(</span><span class="str">'/phones'</span><span class="pun">)).</span><span class="pln">toBe</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">然后是“电话链接(phone links)”规约：</p><p translation-origin="off">And the second is the phone links spec:</p><code-example path="upgrade-phonecat-3-final/e2e-spec.ts" region="links" header="e2e-tests/scenarios.ts" ng-version="9.0.0-rc.11"><div style="display:none">it('should render phone specific <a href="api/router/RouterLinkActive#links" class="code-anchor">links</a>', function() { let <a href="api/animations/query" class="code-anchor">query</a> = element(by.css('input')); query.sendKeys('nexus'); element.all(by.css('.phones li a')).first().click(); browser.getCurrentUrl().then(function(url: string) { expect(url.endsWith('/phones/nexus-s')).toBe(true); }); });</div><header class="ng-star-inserted">e2e-tests/scenarios.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from e2e-tests/scenarios.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">it</span><span class="pun">(</span><span class="str">'should render phone specific </span><a href="api/router/RouterLinkActive#links" class="code-anchor"><span class="str">links</span></a><span class="str">'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">let</span><span class="pln"> </span><a href="api/animations/query" class="code-anchor"><span class="pln">query</span></a><span class="pln"> </span><span class="pun">=</span><span class="pln"> element</span><span class="pun">(</span><span class="kwd">by</span><span class="pun">.</span><span class="pln">css</span><span class="pun">(</span><span class="str">'input'</span><span class="pun">));</span><span class="pln">
  query</span><span class="pun">.</span><span class="pln">sendKeys</span><span class="pun">(</span><span class="str">'nexus'</span><span class="pun">);</span><span class="pln">
  element</span><span class="pun">.</span><span class="pln">all</span><span class="pun">(</span><span class="kwd">by</span><span class="pun">.</span><span class="pln">css</span><span class="pun">(</span><span class="str">'.phones li a'</span><span class="pun">)).</span><span class="pln">first</span><span class="pun">().</span><span class="pln">click</span><span class="pun">();</span><span class="pln">
  browser</span><span class="pun">.</span><span class="pln">getCurrentUrl</span><span class="pun">().</span><span class="kwd">then</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">url</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">url</span><span class="pun">.</span><span class="pln">endsWith</span><span class="pun">(</span><span class="str">'/phones/nexus-s'</span><span class="pun">)).</span><span class="pln">toBe</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><h3 id="unit-tests" translation-result="on">单元测试<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#unit-tests"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="unit-tests">Unit Tests<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/upgrade#unit-tests"><i class="material-icons">link</i></a></h3><p translation-result="on">另一方面，对于单元测试来说，需要更多的转化工作。实际上，它们需要随着产品代码一起升级。</p><p translation-origin="off">For unit tests, on the other hand, more conversion work is needed. Effectively they need to be <em>upgraded</em> along with the production code.</p><p translation-result="on">在转成 TypeScript 期间，严格来讲没有什么改动是必须的。但把单元测试代码转成 TypeScript 仍然是个好主意， 产品代码从 TypeScript 中获得的那些增益也同样适用于测试代码。</p><p translation-origin="off">During TypeScript conversion no changes are strictly necessary. But it may be a good idea to convert the unit test code into TypeScript as well.</p><p translation-result="on">比如，在这个电话详情组件的规约中，你不仅用到了 ES2015 中的箭头函数和块作用域变量这些特性，还为所用的一些 AngularJS 服务提供了类型定义。</p><p translation-origin="off">For instance, in the phone detail component spec, you can use ES2015 features like arrow functions and block-scoped variables and benefit from the type definitions of the AngularJS services you're consuming:</p><code-example path="upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts" header="app/phone-detail/phone-detail.component.spec.ts" ng-version="9.0.0-rc.11"><div style="display:none">describe('phoneDetail', () =&gt; { // Load the module that contains the `phoneDetail` component before each test beforeEach(angular.mock.module('phoneDetail')); // Test the controller describe('PhoneDetailController', () =&gt; { let $httpBackend: angular.IHttpBackendService; let ctrl: any; let xyzPhoneData = { name: 'phone xyz', images: ['image/url1.png', 'image/url2.png'] }; beforeEach(inject(($componentController: any, <a href="" class="code-anchor">_</a>$httpBackend_: angular.IHttpBackendService, $routeParams: angular.route.IRouteParamsService) =&gt; { $httpBackend = <a href="" class="code-anchor">_</a>$httpBackend_; $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData); $routeParams['phoneId'] = 'xyz'; ctrl = $componentController('phoneDetail'); })); it('should fetch the phone details', () =&gt; { jasmine.addCustomEqualityTester(angular.equals); expect(ctrl.phone).toEqual({}); $httpBackend.flush(); expect(ctrl.phone).toEqual(xyzPhoneData); }); }); });</div><header class="ng-star-inserted">app/phone-detail/phone-detail.component.spec.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-detail/phone-detail.component.spec.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">describe</span><span class="pun">(</span><span class="str">'phoneDetail'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

  </span><span class="com">// Load the module that contains the `phoneDetail` component before each test</span><span class="pln">
  beforeEach</span><span class="pun">(</span><span class="pln">angular</span><span class="pun">.</span><span class="pln">mock</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'phoneDetail'</span><span class="pun">));</span><span class="pln">

  </span><span class="com">// Test the controller</span><span class="pln">
  describe</span><span class="pun">(</span><span class="str">'PhoneDetailController'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> $httpBackend</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IHttpBackendService</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> ctrl</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> xyzPhoneData </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phone xyz'</span><span class="pun">,</span><span class="pln">
      images</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'image/url1.png'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'image/url2.png'</span><span class="pun">]</span><span class="pln">
    </span><span class="pun">};</span><span class="pln">

    beforeEach</span><span class="pun">(</span><span class="pln">inject</span><span class="pun">((</span><span class="pln">$componentController</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln">
                       </span><a href="" class="code-anchor"><span class="pln">_</span></a><span class="pln">$httpBackend_</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="typ">IHttpBackendService</span><span class="pun">,</span><span class="pln">
                       $routeParams</span><span class="pun">:</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">route</span><span class="pun">.</span><span class="typ">IRouteParamsService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      $httpBackend </span><span class="pun">=</span><span class="pln"> </span><a href="" class="code-anchor"><span class="pln">_</span></a><span class="pln">$httpBackend_</span><span class="pun">;</span><span class="pln">
      $httpBackend</span><span class="pun">.</span><span class="pln">expectGET</span><span class="pun">(</span><span class="str">'phones/xyz.json'</span><span class="pun">).</span><span class="pln">respond</span><span class="pun">(</span><span class="pln">xyzPhoneData</span><span class="pun">);</span><span class="pln">

      $routeParams</span><span class="pun">[</span><span class="str">'phoneId'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="str">'xyz'</span><span class="pun">;</span><span class="pln">

      ctrl </span><span class="pun">=</span><span class="pln"> $componentController</span><span class="pun">(</span><span class="str">'phoneDetail'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}));</span><span class="pln">

    it</span><span class="pun">(</span><span class="str">'should fetch the phone details'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      jasmine</span><span class="pun">.</span><span class="pln">addCustomEqualityTester</span><span class="pun">(</span><span class="pln">angular</span><span class="pun">.</span><span class="pln">equals</span><span class="pun">);</span><span class="pln">

      expect</span><span class="pun">(</span><span class="pln">ctrl</span><span class="pun">.</span><span class="pln">phone</span><span class="pun">).</span><span class="pln">toEqual</span><span class="pun">({});</span><span class="pln">

      $httpBackend</span><span class="pun">.</span><span class="pln">flush</span><span class="pun">();</span><span class="pln">
      expect</span><span class="pun">(</span><span class="pln">ctrl</span><span class="pun">.</span><span class="pln">phone</span><span class="pun">).</span><span class="pln">toEqual</span><span class="pun">(</span><span class="pln">xyzPhoneData</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">

  </span><span class="pun">});</span><span class="pln">

</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">一旦你开始了升级过程并引入了 SystemJS，还需要对 Karma 进行配置修改。 你需要让 SystemJS 加载所有的 Angular 新代码，</p><p translation-origin="off">Once you start the upgrade process and bring in SystemJS, configuration changes are needed for Karma. You need to let SystemJS load all the new Angular code, which can be done with the following kind of shim file:</p><code-example path="upgrade-phonecat-2-hybrid/karma-test-shim.1.js" header="karma-test-shim.js" ng-version="9.0.0-rc.11"><div style="display:none">// /*<a href="api/core/global" class="code-anchor">global</a> jasmine, __karma__, window*/ Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. // Uncomment to get <a href="api/core/Version#full" class="code-anchor">full</a> stacktrace output. Sometimes helpful, usually not. // Error.stackTraceLimit = <a href="api/common/NumberSymbol#Infinity" class="code-anchor">Infinity</a>; // jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; var builtPath = '/base/app/'; __karma__.loaded = function () { }; function isJsFile(path) { return path.slice(-3) == '.js'; } function isSpecFile(path) { return /\.spec\.(.*\.)?js$/.test(path); } function isBuiltFile(path) { return isJsFile(path) &amp;&amp; (path.substr(0, builtPath.length) == builtPath); } var allSpecFiles = Object.keys(window.__karma__.files) .filter(isSpecFile) .filter(isBuiltFile); System.config({ baseURL: '/base', // Extend usual application package list with test folder packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, // Assume npm: is set in `paths` in systemjs.config // Map the angular testing umd bundles map: { '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', '@angular/common/<a href="api/common/http" class="code-anchor">http</a>/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js', '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', }, }); System.import('systemjs.config.js') .then(importSystemJsExtras) .then(initTestBed) .then(initTesting); /** <a href="api/core/Optional" class="code-anchor">Optional</a> SystemJS configuration extras. Keep going w/o it */ function importSystemJsExtras(){ return System.import('systemjs.config.extras.js') .catch(function(<a href="api/router/NavigationCancel#reason" class="code-anchor">reason</a>) { console.log( '<a href="api/core/MissingTranslationStrategy#Warning" class="code-anchor">Warning</a>: System.import could not load the <a href="api/animations/AnimationQueryOptions#optional" class="code-anchor">optional</a> "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' ); console.log(<a href="api/router/NavigationCancel#reason" class="code-anchor">reason</a>); }); } function initTestBed(){ return Promise.all([ System.import('@angular/core/testing'), System.import('@angular/platform-browser-dynamic/testing') ]) .then(function (providers) { var coreTesting = providers[0]; var browserTesting = providers[1]; coreTesting.TestBed.initTestEnvironment( browserTesting.BrowserDynamicTestingModule, browserTesting.platformBrowserDynamicTesting()); }) } // Import all spec files and start karma function initTesting () { return Promise.all( allSpecFiles.map(function (moduleName) { return System.import(moduleName); }) ) .then(__karma__.start, __karma__.error); }</div><header class="ng-star-inserted">karma-test-shim.js</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from karma-test-shim.js">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// /*</span><a href="api/core/global" class="code-anchor"><span class="com">global</span></a><span class="com"> jasmine, __karma__, window*/</span><span class="pln">
</span><span class="typ">Error</span><span class="pun">.</span><span class="pln">stackTraceLimit </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="com">// "No stacktrace"" is usually best for app testing.</span><span class="pln">

</span><span class="com">// Uncomment to get </span><a href="api/core/Version#full" class="code-anchor"><span class="com">full</span></a><span class="com"> stacktrace output. Sometimes helpful, usually not.</span><span class="pln">
</span><span class="com">// Error.stackTraceLimit = </span><a href="api/common/NumberSymbol#Infinity" class="code-anchor"><span class="com">Infinity</span></a><span class="com">; //</span><span class="pln">

jasmine</span><span class="pun">.</span><span class="pln">DEFAULT_TIMEOUT_INTERVAL </span><span class="pun">=</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> builtPath </span><span class="pun">=</span><span class="pln"> </span><span class="str">'/base/app/'</span><span class="pun">;</span><span class="pln">

__karma__</span><span class="pun">.</span><span class="pln">loaded </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">};</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> isJsFile</span><span class="pun">(</span><span class="pln">path</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> path</span><span class="pun">.</span><span class="pln">slice</span><span class="pun">(-</span><span class="lit">3</span><span class="pun">)</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="str">'.js'</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> isSpecFile</span><span class="pun">(</span><span class="pln">path</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> </span><span class="str">/\.spec\.(.*\.)?js$/</span><span class="pun">.</span><span class="pln">test</span><span class="pun">(</span><span class="pln">path</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> isBuiltFile</span><span class="pun">(</span><span class="pln">path</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> isJsFile</span><span class="pun">(</span><span class="pln">path</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> </span><span class="pun">(</span><span class="pln">path</span><span class="pun">.</span><span class="pln">substr</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> builtPath</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> builtPath</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> allSpecFiles </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Object</span><span class="pun">.</span><span class="pln">keys</span><span class="pun">(</span><span class="pln">window</span><span class="pun">.</span><span class="pln">__karma__</span><span class="pun">.</span><span class="pln">files</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">filter</span><span class="pun">(</span><span class="pln">isSpecFile</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">filter</span><span class="pun">(</span><span class="pln">isBuiltFile</span><span class="pun">);</span><span class="pln">

</span><span class="typ">System</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span><span class="pln">
  baseURL</span><span class="pun">:</span><span class="pln"> </span><span class="str">'/base'</span><span class="pun">,</span><span class="pln">
  </span><span class="com">// Extend usual application package list with test folder</span><span class="pln">
  packages</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">'testing'</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> main</span><span class="pun">:</span><span class="pln"> </span><span class="str">'index.js'</span><span class="pun">,</span><span class="pln"> defaultExtension</span><span class="pun">:</span><span class="pln"> </span><span class="str">'js'</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">},</span><span class="pln">

  </span><span class="com">// Assume npm: is set in `paths` in systemjs.config</span><span class="pln">
  </span><span class="com">// Map the angular testing umd bundles</span><span class="pln">
  map</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">'@angular/core/testing'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/core/bundles/core-testing.umd.js'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'@angular/common/testing'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/common/bundles/common-testing.umd.js'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">/testing'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/common/bundles/common-http-testing.umd.js'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'@angular/compiler/testing'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/compiler/bundles/compiler-testing.umd.js'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'@angular/platform-browser/testing'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'@angular/platform-browser-dynamic/testing'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'@angular/router/testing'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/router/bundles/router-testing.umd.js'</span><span class="pun">,</span><span class="pln">
    </span><span class="str">'@angular/forms/testing'</span><span class="pun">:</span><span class="pln"> </span><span class="str">'npm:@angular/forms/bundles/forms-testing.umd.js'</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
</span><span class="pun">});</span><span class="pln">

</span><span class="typ">System</span><span class="pun">.</span><span class="kwd">import</span><span class="pun">(</span><span class="str">'systemjs.config.js'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="kwd">then</span><span class="pun">(</span><span class="pln">importSystemJsExtras</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="kwd">then</span><span class="pun">(</span><span class="pln">initTestBed</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="kwd">then</span><span class="pun">(</span><span class="pln">initTesting</span><span class="pun">);</span><span class="pln">

</span><span class="com">/** </span><a href="api/core/Optional" class="code-anchor"><span class="com">Optional</span></a><span class="com"> SystemJS configuration extras. Keep going w/o it */</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> importSystemJsExtras</span><span class="pun">(){</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">System</span><span class="pun">.</span><span class="kwd">import</span><span class="pun">(</span><span class="str">'systemjs.config.extras.js'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="kwd">catch</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><a href="api/router/NavigationCancel#reason" class="code-anchor"><span class="pln">reason</span></a><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">
      </span><span class="str">'</span><a href="api/core/MissingTranslationStrategy#Warning" class="code-anchor"><span class="str">Warning</span></a><span class="str">: System.import could not load the </span><a href="api/animations/AnimationQueryOptions#optional" class="code-anchor"><span class="str">optional</span></a><span class="str"> "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'</span><span class="pln">
    </span><span class="pun">);</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><a href="api/router/NavigationCancel#reason" class="code-anchor"><span class="pln">reason</span></a><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> initTestBed</span><span class="pun">(){</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">.</span><span class="pln">all</span><span class="pun">([</span><span class="pln">
    </span><span class="typ">System</span><span class="pun">.</span><span class="kwd">import</span><span class="pun">(</span><span class="str">'@angular/core/testing'</span><span class="pun">),</span><span class="pln">
    </span><span class="typ">System</span><span class="pun">.</span><span class="kwd">import</span><span class="pun">(</span><span class="str">'@angular/platform-browser-dynamic/testing'</span><span class="pun">)</span><span class="pln">
  </span><span class="pun">])</span><span class="pln">

  </span><span class="pun">.</span><span class="kwd">then</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">providers</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> coreTesting    </span><span class="pun">=</span><span class="pln"> providers</span><span class="pun">[</span><span class="lit">0</span><span class="pun">];</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> browserTesting </span><span class="pun">=</span><span class="pln"> providers</span><span class="pun">[</span><span class="lit">1</span><span class="pun">];</span><span class="pln">

    coreTesting</span><span class="pun">.</span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">initTestEnvironment</span><span class="pun">(</span><span class="pln">
      browserTesting</span><span class="pun">.</span><span class="typ">BrowserDynamicTestingModule</span><span class="pun">,</span><span class="pln">
      browserTesting</span><span class="pun">.</span><span class="pln">platformBrowserDynamicTesting</span><span class="pun">());</span><span class="pln">
  </span><span class="pun">})</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// Import all spec files and start karma</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> initTesting </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">.</span><span class="pln">all</span><span class="pun">(</span><span class="pln">
    allSpecFiles</span><span class="pun">.</span><span class="pln">map</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">moduleName</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">System</span><span class="pun">.</span><span class="kwd">import</span><span class="pun">(</span><span class="pln">moduleName</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">})</span><span class="pln">
  </span><span class="pun">)</span><span class="pln">
  </span><span class="pun">.</span><span class="kwd">then</span><span class="pun">(</span><span class="pln">__karma__</span><span class="pun">.</span><span class="pln">start</span><span class="pun">,</span><span class="pln"> __karma__</span><span class="pun">.</span><span class="pln">error</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">这个 shim 文件首先加载了 SystemJS 的配置，然后是 Angular 的测试支持库，然后是应用本身的规约文件。</p><p translation-origin="off">The shim first loads the SystemJS configuration, then Angular's test support libraries, and then the application's spec files themselves.</p><p translation-result="on">然后需要修改 Karma 配置，来让它使用本应用的根目录作为基础目录(base directory)，而不是 <code>app</code>。</p><p translation-origin="off">Karma configuration should then be changed so that it uses the application root dir as the base directory, instead of <code>app</code>.</p><code-example path="upgrade-phonecat-2-hybrid/karma.conf.ajs.js" region="basepath" header="karma.conf.js" ng-version="9.0.0-rc.11"><div style="display:none">basePath: './',</div><header class="ng-star-inserted">karma.conf.js</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from karma.conf.js">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">basePath</span><span class="pun">:</span><span class="pln"> </span><span class="str">'./'</span><span class="pun">,</span></code>
    </pre></aio-code></code-example><p translation-result="on">一旦这些完成了，你就能加载 SystemJS 和其它依赖，并切换配置文件来加载那些应用文件，而<em>不用</em>在 Karma 页面中包含它们。 你要让这个 shim 文件和 SystemJS 去加载它们。</p><p translation-origin="off">Once done, you can load SystemJS and other dependencies, and also switch the configuration for loading application files so that they are <em>not</em> included to the page by Karma. You'll let the shim and SystemJS load them.</p><code-example path="upgrade-phonecat-2-hybrid/karma.conf.ajs.js" region="files" header="karma.conf.js" ng-version="9.0.0-rc.11"><div style="display:none">// System.js for module loading 'node_modules/systemjs/dist/system.src.js', // Polyfills 'node_modules/core-js/client/shim.js', // zone.js 'node_modules/zone.js/dist/zone.js', 'node_modules/zone.js/dist/zone-testing.js', // RxJs. { <a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'node_modules/rxjs/**/*.js', included: false, watched: false }, { <a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, // Angular itself and the testing library {<a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'node_modules/@angular/**/*.js', included: false, watched: false}, {<a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, {<a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'systemjs.config.js', included: false, watched: false}, 'karma-test-shim.js', {<a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'app/**/*.module.js', included: false, watched: true}, {<a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'app/*!(.module|.spec).js', included: false, watched: true}, {<a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'app/!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true}, {<a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: 'app/**/*.spec.js', included: false, watched: true}, {<a href="api/forms/PatternValidator" class="code-anchor">pattern</a>: '**/*.html', included: false, watched: true},</div><header class="ng-star-inserted">karma.conf.js</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from karma.conf.js">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// System.js for module loading</span><span class="pln">
</span><span class="str">'node_modules/systemjs/dist/system.src.js'</span><span class="pun">,</span><span class="pln">

</span><span class="com">// Polyfills</span><span class="pln">
</span><span class="str">'node_modules/core-js/client/shim.js'</span><span class="pun">,</span><span class="pln">

</span><span class="com">// zone.js</span><span class="pln">
</span><span class="str">'node_modules/zone.js/dist/zone.js'</span><span class="pun">,</span><span class="pln">
</span><span class="str">'node_modules/zone.js/dist/zone-testing.js'</span><span class="pun">,</span><span class="pln">

</span><span class="com">// RxJs.</span><span class="pln">
</span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'node_modules/rxjs/**/*.js'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
</span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'node_modules/rxjs/**/*.js.map'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="pun">},</span><span class="pln">

</span><span class="com">// Angular itself and the testing library</span><span class="pln">
</span><span class="pun">{</span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'node_modules/@angular/**/*.js'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">},</span><span class="pln">
</span><span class="pun">{</span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'node_modules/@angular/**/*.js.map'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">},</span><span class="pln">

</span><span class="pun">{</span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'systemjs.config.js'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">},</span><span class="pln">
</span><span class="str">'karma-test-shim.js'</span><span class="pun">,</span><span class="pln">

</span><span class="pun">{</span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'app/**/*.module.js'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">},</span><span class="pln">
</span><span class="pun">{</span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'app/*!(.module|.spec).js'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">},</span><span class="pln">
</span><span class="pun">{</span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'app/!(bower_components)/**/*!(.module|.spec).js'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">},</span><span class="pln">
</span><span class="pun">{</span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'app/**/*.spec.js'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">},</span><span class="pln">

</span><span class="pun">{</span><a href="api/forms/PatternValidator" class="code-anchor"><span class="pln">pattern</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'**/*.html'</span><span class="pun">,</span><span class="pln"> included</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> watched</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">},</span></code>
    </pre></aio-code></code-example><p translation-result="on">由于 Angular 组件中的 HTML 模板也同样要被加载，所以你得帮 Karma 一把，帮它在正确的路径下找到这些模板：</p><p translation-origin="off">Since the HTML templates of Angular components will be loaded as well, you must help Karma out a bit so that it can route them to the right paths:</p><code-example path="upgrade-phonecat-2-hybrid/karma.conf.ajs.js" region="html" header="karma.conf.js" ng-version="9.0.0-rc.11"><div style="display:none">// proxied base paths for loading assets proxies: { // required for component assets fetched by Angular's compiler "/phone-detail": '/base/app/phone-detail', "/phone-list": '/base/app/phone-list' },</div><header class="ng-star-inserted">karma.conf.js</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from karma.conf.js">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// proxied base paths for loading assets</span><span class="pln">
proxies</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="com">// required for component assets fetched by Angular's compiler</span><span class="pln">
  </span><span class="str">"/phone-detail"</span><span class="pun">:</span><span class="pln"> </span><span class="str">'/base/app/phone-detail'</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"/phone-list"</span><span class="pun">:</span><span class="pln"> </span><span class="str">'/base/app/phone-list'</span><span class="pln">
</span><span class="pun">},</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果产品代码被切换到了 Angular，单元测试文件本身也需要切换过来。对勾(checkmark)管道的规约可能是最直观的，因为它没有任何依赖：</p><p translation-origin="off">The unit test files themselves also need to be switched to Angular when their production counterparts are switched. The specs for the checkmark pipe are probably the most straightforward, as the pipe has no dependencies:</p><code-example path="upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts" header="app/core/checkmark/checkmark.pipe.spec.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { CheckmarkPipe } from './checkmark.pipe'; describe('CheckmarkPipe', function() { it('should convert boolean values to unicode checkmark or cross', function () { const checkmarkPipe = new CheckmarkPipe(); expect(checkmarkPipe.transform(true)).toBe('\u2713'); expect(checkmarkPipe.transform(false)).toBe('\u2718'); }); });</div><header class="ng-star-inserted">app/core/checkmark/checkmark.pipe.spec.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/checkmark/checkmark.pipe.spec.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./checkmark.pipe'</span><span class="pun">;</span><span class="pln">

describe</span><span class="pun">(</span><span class="str">'CheckmarkPipe'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

  it</span><span class="pun">(</span><span class="str">'should convert boolean values to unicode checkmark or cross'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">const</span><span class="pln"> checkmarkPipe </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pun">();</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">checkmarkPipe</span><span class="pun">.</span><span class="pln">transform</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">)).</span><span class="pln">toBe</span><span class="pun">(</span><span class="str">'\u2713'</span><span class="pun">);</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">checkmarkPipe</span><span class="pun">.</span><span class="pln">transform</span><span class="pun">(</span><span class="kwd">false</span><span class="pun">)).</span><span class="pln">toBe</span><span class="pun">(</span><span class="str">'\u2718'</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>Phone</code> 服务的测试会牵扯到一点别的。你需要把模拟版的 AngularJS <code>$httpBackend</code> 服务切换到模拟板的 Angular Http 后端。</p><p translation-origin="off">The unit test for the phone service is a bit more involved. You need to switch from the mocked-out AngularJS <code>$httpBackend</code> to a mocked-out Angular Http backend.</p><code-example path="upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts" header="app/core/phone/phone.service.spec.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { inject, <a href="api/core/testing/TestBed" class="code-anchor">TestBed</a> } from '@angular/core/testing'; import { <a href="api/common/http/testing/HttpClientTestingModule" class="code-anchor">HttpClientTestingModule</a>, <a href="api/common/http/testing/HttpTestingController" class="code-anchor">HttpTestingController</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>/testing'; import { Phone, PhoneData } from './phone.service'; describe('Phone', function() { let phone: Phone; let phonesData: PhoneData[] = [ {name: 'Phone X', snippet: '', images: []}, {name: 'Phone Y', snippet: '', images: []}, {name: 'Phone Z', snippet: '', images: []} ]; let httpMock: <a href="api/common/http/testing/HttpTestingController" class="code-anchor">HttpTestingController</a>; beforeEach(() =&gt; { TestBed.configureTestingModule({ imports: [ <a href="api/common/http/testing/HttpClientTestingModule" class="code-anchor">HttpClientTestingModule</a> ], providers: [ Phone, ] }); }); beforeEach(inject([<a href="api/common/http/testing/HttpTestingController" class="code-anchor">HttpTestingController</a>, Phone], (_httpMock_: <a href="api/common/http/testing/HttpTestingController" class="code-anchor">HttpTestingController</a>, _phone_: Phone) =&gt; { httpMock = _httpMock_; phone = _phone_; })); afterEach(() =&gt; { httpMock.verify(); }); it('should fetch the phones data from `/phones/phones.json`', () =&gt; { phone.query().subscribe(result =&gt; { expect(result).toEqual(phonesData); }); const req = httpMock.expectOne(`/phones/phones.json`); req.flush(phonesData); }); });</div><header class="ng-star-inserted">app/core/phone/phone.service.spec.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/core/phone/phone.service.spec.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> inject</span><span class="pun">,</span><span class="pln"> </span><a href="api/core/testing/TestBed" class="code-anchor"><span class="typ">TestBed</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core/testing'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/testing/HttpClientTestingModule" class="code-anchor"><span class="typ">HttpClientTestingModule</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/common/http/testing/HttpTestingController" class="code-anchor"><span class="typ">HttpTestingController</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">/testing'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone.service'</span><span class="pun">;</span><span class="pln">

describe</span><span class="pun">(</span><span class="str">'Phone'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">let</span><span class="pln"> phone</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">let</span><span class="pln"> phonesData</span><span class="pun">:</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pun">[]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Phone X'</span><span class="pun">,</span><span class="pln"> snippet</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> images</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]},</span><span class="pln">
    </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Phone Y'</span><span class="pun">,</span><span class="pln"> snippet</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> images</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]},</span><span class="pln">
    </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Phone Z'</span><span class="pun">,</span><span class="pln"> snippet</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> images</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]}</span><span class="pln">
  </span><span class="pun">];</span><span class="pln">
  </span><span class="kwd">let</span><span class="pln"> httpMock</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/http/testing/HttpTestingController" class="code-anchor"><span class="typ">HttpTestingController</span></a><span class="pun">;</span><span class="pln">

  beforeEach</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">configureTestingModule</span><span class="pun">({</span><span class="pln">
      imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><a href="api/common/http/testing/HttpClientTestingModule" class="code-anchor"><span class="typ">HttpClientTestingModule</span></a><span class="pln">
      </span><span class="pun">],</span><span class="pln">
      providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln">
      </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

  beforeEach</span><span class="pun">(</span><span class="pln">inject</span><span class="pun">([</span><a href="api/common/http/testing/HttpTestingController" class="code-anchor"><span class="typ">HttpTestingController</span></a><span class="pun">,</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">],</span><span class="pln"> </span><span class="pun">(</span><span class="pln">_httpMock_</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/http/testing/HttpTestingController" class="code-anchor"><span class="typ">HttpTestingController</span></a><span class="pun">,</span><span class="pln"> _phone_</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    httpMock </span><span class="pun">=</span><span class="pln"> _httpMock_</span><span class="pun">;</span><span class="pln">
    phone </span><span class="pun">=</span><span class="pln"> _phone_</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}));</span><span class="pln">

  afterEach</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    httpMock</span><span class="pun">.</span><span class="pln">verify</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

  it</span><span class="pun">(</span><span class="str">'should fetch the phones data from `/phones/phones.json`'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    phone</span><span class="pun">.</span><span class="pln">query</span><span class="pun">().</span><span class="pln">subscribe</span><span class="pun">(</span><span class="pln">result </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      expect</span><span class="pun">(</span><span class="pln">result</span><span class="pun">).</span><span class="pln">toEqual</span><span class="pun">(</span><span class="pln">phonesData</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">});</span><span class="pln">
    </span><span class="kwd">const</span><span class="pln"> req </span><span class="pun">=</span><span class="pln"> httpMock</span><span class="pun">.</span><span class="pln">expectOne</span><span class="pun">(</span><span class="str">`/phones/phones.json`</span><span class="pun">);</span><span class="pln">
    req</span><span class="pun">.</span><span class="pln">flush</span><span class="pun">(</span><span class="pln">phonesData</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">对于组件的规约，你可以模拟出 <code>Phone</code> 服务本身，并且让它提供电话的数据。你可以对这些组件使用 Angular 的组件单元测试 API。</p><p translation-origin="off">For the component specs, you can mock out the <code>Phone</code> service itself, and have it provide canned phone data. You use Angular's component unit testing APIs for both components.</p><code-example path="upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts" header="app/phone-detail/phone-detail.component.spec.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a> } from '@angular/router'; import { Observable, of } from 'rxjs'; import { <a href="api/core/testing/async" class="code-anchor">async</a>, <a href="api/core/testing/TestBed" class="code-anchor">TestBed</a> } from '@angular/core/testing'; import { PhoneDetailComponent&nbsp;} from './phone-detail.component'; import { Phone, PhoneData } from '../core/phone/phone.service'; import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; function xyzPhoneData(): PhoneData { return { name: 'phone xyz', snippet: '', images: ['image/url1.png', 'image/url2.png'] }; } class MockPhone { get(id: string): Observable&lt;PhoneData&gt; { return of(xyzPhoneData()); } } class ActivatedRouteMock { constructor(public snapshot: any) {} } describe('PhoneDetailComponent', () =&gt; { beforeEach(<a href="api/core/testing/async" class="code-anchor">async</a>(() =&gt; { TestBed.configureTestingModule({ declarations: [ CheckmarkPipe, PhoneDetailComponent ], providers: [ { provide: Phone, useClass: MockPhone }, { provide: <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a>, <a href="api/core/ValueSansProvider#useValue" class="code-anchor">useValue</a>: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) } ] }) .compileComponents(); })); it('should fetch phone detail', () =&gt; { const fixture = TestBed.createComponent(PhoneDetailComponent); fixture.detectChanges(); let compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain(xyzPhoneData().name); }); });</div><header class="ng-star-inserted">app/phone-detail/phone-detail.component.spec.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-detail/phone-detail.component.spec.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">,</span><span class="pln"> of </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'rxjs'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/testing/async" class="code-anchor"><span class="kwd">async</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/testing/TestBed" class="code-anchor"><span class="typ">TestBed</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core/testing'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln">&nbsp;</span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-detail.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/phone/phone.service'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/checkmark/checkmark.pipe'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> xyzPhoneData</span><span class="pun">():</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'phone xyz'</span><span class="pun">,</span><span class="pln">
    snippet</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln">
    images</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'image/url1.png'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'image/url2.png'</span><span class="pun">]</span><span class="pln">
  </span><span class="pun">};</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">MockPhone</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">get</span><span class="pun">(</span><span class="pln">id</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">):</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> of</span><span class="pun">(</span><span class="pln">xyzPhoneData</span><span class="pun">());</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">


</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ActivatedRouteMock</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">public</span><span class="pln"> snapshot</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">


describe</span><span class="pun">(</span><span class="str">'PhoneDetailComponent'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">


  beforeEach</span><span class="pun">(</span><a href="api/core/testing/async" class="code-anchor"><span class="kwd">async</span></a><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">configureTestingModule</span><span class="pun">({</span><span class="pln">
      declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
      providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> useClass</span><span class="pun">:</span><span class="pln"> </span><span class="typ">MockPhone</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ValueSansProvider#useValue" class="code-anchor"><span class="pln">useValue</span></a><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ActivatedRouteMock</span><span class="pun">({</span><span class="pln"> </span><span class="kwd">params</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">'phoneId'</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
      </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">})</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">compileComponents</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}));</span><span class="pln">

  it</span><span class="pun">(</span><span class="str">'should fetch phone detail'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">const</span><span class="pln"> fixture </span><span class="pun">=</span><span class="pln"> </span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">createComponent</span><span class="pun">(</span><span class="typ">PhoneDetailComponent</span><span class="pun">);</span><span class="pln">
    fixture</span><span class="pun">.</span><span class="pln">detectChanges</span><span class="pun">();</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> compiled </span><span class="pun">=</span><span class="pln"> fixture</span><span class="pun">.</span><span class="pln">debugElement</span><span class="pun">.</span><span class="pln">nativeElement</span><span class="pun">;</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">compiled</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'h1'</span><span class="pun">).</span><span class="pln">textContent</span><span class="pun">).</span><span class="pln">toContain</span><span class="pun">(</span><span class="pln">xyzPhoneData</span><span class="pun">().</span><span class="pln">name</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><code-example path="upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts" header="app/phone-list/phone-list.component.spec.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NO_ERRORS_SCHEMA" class="code-anchor">NO_ERRORS_SCHEMA</a> } from '@angular/core'; import { <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a> } from '@angular/router'; import { Observable, of } from 'rxjs'; import { <a href="api/core/testing/async" class="code-anchor">async</a>, <a href="api/core/testing/ComponentFixture" class="code-anchor">ComponentFixture</a>, <a href="api/core/testing/TestBed" class="code-anchor">TestBed</a> } from '@angular/core/testing'; import { <a href="api/common/testing/SpyLocation" class="code-anchor">SpyLocation</a> } from '@angular/common/testing'; import { PhoneListComponent } from './phone-list.component'; import { Phone, PhoneData } from '../core/phone/phone.service'; class ActivatedRouteMock { constructor(public snapshot: any) {} } class MockPhone { <a href="api/animations/query" class="code-anchor">query</a>(): Observable&lt;PhoneData[]&gt; { return of([ {name: 'Nexus S', snippet: '', images: []}, {name: 'Motorola DROID', snippet: '', images: []} ]); } } let fixture: <a href="api/core/testing/ComponentFixture" class="code-anchor">ComponentFixture</a>&lt;PhoneListComponent&gt;; describe('PhoneList', () =&gt; { beforeEach(<a href="api/core/testing/async" class="code-anchor">async</a>(() =&gt; { TestBed.configureTestingModule({ declarations: [ PhoneListComponent ], providers: [ { provide: <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a>, <a href="api/core/ValueSansProvider#useValue" class="code-anchor">useValue</a>: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }, { provide: <a href="api/common/Location" class="code-anchor">Location</a>, useClass: <a href="api/common/testing/SpyLocation" class="code-anchor">SpyLocation</a> }, { provide: Phone, useClass: MockPhone }, ], schemas: [ <a href="api/core/NO_ERRORS_SCHEMA" class="code-anchor">NO_ERRORS_SCHEMA</a> ] }) .compileComponents(); })); beforeEach(() =&gt; { fixture = TestBed.createComponent(PhoneListComponent); }); it('should create "phones" <a href="api/forms/NgModel#model" class="code-anchor">model</a> with 2 phones fetched from xhr', () =&gt; { fixture.detectChanges(); let compiled = fixture.debugElement.nativeElement; expect(compiled.querySelectorAll('.phone-list-item').length).toBe(2); expect( compiled.querySelector('.phone-list-item:nth-child(1)').textContent ).toContain('Motorola DROID'); expect( compiled.querySelector('.phone-list-item:nth-child(2)').textContent ).toContain('Nexus S'); }); xit('should set the default value of orderProp <a href="api/forms/NgModel#model" class="code-anchor">model</a>', () =&gt; { fixture.detectChanges(); let compiled = fixture.debugElement.nativeElement; expect( compiled.querySelector('select option:last-child').selected ).toBe(true); }); });</div><header class="ng-star-inserted">app/phone-list/phone-list.component.spec.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.component.spec.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NO_ERRORS_SCHEMA" class="code-anchor"><span class="pln">NO_ERRORS_SCHEMA</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">,</span><span class="pln"> of </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'rxjs'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/testing/async" class="code-anchor"><span class="kwd">async</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/testing/ComponentFixture" class="code-anchor"><span class="typ">ComponentFixture</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/testing/TestBed" class="code-anchor"><span class="typ">TestBed</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core/testing'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/testing/SpyLocation" class="code-anchor"><span class="typ">SpyLocation</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/testing'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-list.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/phone/phone.service'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ActivatedRouteMock</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">public</span><span class="pln"> snapshot</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">MockPhone</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><a href="api/animations/query" class="code-anchor"><span class="pln">query</span></a><span class="pun">():</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">&lt;</span><span class="typ">PhoneData</span><span class="pun">[]&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> of</span><span class="pun">([</span><span class="pln">
      </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Nexus S'</span><span class="pun">,</span><span class="pln"> snippet</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> images</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Motorola DROID'</span><span class="pun">,</span><span class="pln"> snippet</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> images</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]}</span><span class="pln">
    </span><span class="pun">]);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">let</span><span class="pln"> fixture</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/testing/ComponentFixture" class="code-anchor"><span class="typ">ComponentFixture</span></a><span class="pun">&lt;</span><span class="typ">PhoneListComponent</span><span class="pun">&gt;;</span><span class="pln">

describe</span><span class="pun">(</span><span class="str">'PhoneList'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

  beforeEach</span><span class="pun">(</span><a href="api/core/testing/async" class="code-anchor"><span class="kwd">async</span></a><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">configureTestingModule</span><span class="pun">({</span><span class="pln">
      declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
      providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ValueSansProvider#useValue" class="code-anchor"><span class="pln">useValue</span></a><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ActivatedRouteMock</span><span class="pun">({</span><span class="pln"> </span><span class="kwd">params</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">'phoneId'</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/Location" class="code-anchor"><span class="typ">Location</span></a><span class="pun">,</span><span class="pln"> useClass</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/testing/SpyLocation" class="code-anchor"><span class="typ">SpyLocation</span></a><span class="pln"> </span><span class="pun">},</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> useClass</span><span class="pun">:</span><span class="pln"> </span><span class="typ">MockPhone</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">],</span><span class="pln">
      schemas</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><a href="api/core/NO_ERRORS_SCHEMA" class="code-anchor"><span class="pln">NO_ERRORS_SCHEMA</span></a><span class="pln"> </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">})</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">compileComponents</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}));</span><span class="pln">

  beforeEach</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    fixture </span><span class="pun">=</span><span class="pln"> </span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">createComponent</span><span class="pun">(</span><span class="typ">PhoneListComponent</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

  it</span><span class="pun">(</span><span class="str">'should create "phones" </span><a href="api/forms/NgModel#model" class="code-anchor"><span class="str">model</span></a><span class="str"> with 2 phones fetched from xhr'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    fixture</span><span class="pun">.</span><span class="pln">detectChanges</span><span class="pun">();</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> compiled </span><span class="pun">=</span><span class="pln"> fixture</span><span class="pun">.</span><span class="pln">debugElement</span><span class="pun">.</span><span class="pln">nativeElement</span><span class="pun">;</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">compiled</span><span class="pun">.</span><span class="pln">querySelectorAll</span><span class="pun">(</span><span class="str">'.phone-list-item'</span><span class="pun">).</span><span class="pln">length</span><span class="pun">).</span><span class="pln">toBe</span><span class="pun">(</span><span class="lit">2</span><span class="pun">);</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">
      compiled</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'.phone-list-item:nth-child(1)'</span><span class="pun">).</span><span class="pln">textContent
    </span><span class="pun">).</span><span class="pln">toContain</span><span class="pun">(</span><span class="str">'Motorola DROID'</span><span class="pun">);</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">
      compiled</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'.phone-list-item:nth-child(2)'</span><span class="pun">).</span><span class="pln">textContent
    </span><span class="pun">).</span><span class="pln">toContain</span><span class="pun">(</span><span class="str">'Nexus S'</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

  xit</span><span class="pun">(</span><span class="str">'should set the default value of orderProp </span><a href="api/forms/NgModel#model" class="code-anchor"><span class="str">model</span></a><span class="str">'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    fixture</span><span class="pun">.</span><span class="pln">detectChanges</span><span class="pun">();</span><span class="pln">
    </span><span class="kwd">let</span><span class="pln"> compiled </span><span class="pun">=</span><span class="pln"> fixture</span><span class="pun">.</span><span class="pln">debugElement</span><span class="pun">.</span><span class="pln">nativeElement</span><span class="pun">;</span><span class="pln">
    expect</span><span class="pun">(</span><span class="pln">
      compiled</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'select option:last-child'</span><span class="pun">).</span><span class="pln">selected
    </span><span class="pun">).</span><span class="pln">toBe</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

</span><span class="pun">});</span></code>
    </pre></aio-code></code-example><p translation-result="on">最后，当你切换到 Angular 路由时，需要重新过一遍这些组件测试。对详情组件来说，你需要提供一个 Angular <code>RouteParams</code> 的 mock 对象，而不再用 AngularJS 中的 <code>$routeParams</code>。</p><p translation-origin="off">Finally, revisit both of the component tests when you switch to the Angular router. For the details component, provide a mock of Angular <code><a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a></code> object instead of using the AngularJS <code>$routeParams</code>.</p><code-example path="upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts" region="activatedroute" header="app/phone-detail/phone-detail.component.spec.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a> } from '@angular/router'; /* . . . */ class ActivatedRouteMock { constructor(public snapshot: any) {} } /* . . . */ beforeEach(<a href="api/core/testing/async" class="code-anchor">async</a>(() =&gt; { TestBed.configureTestingModule({ declarations: [ CheckmarkPipe, PhoneDetailComponent ], providers: [ { provide: Phone, useClass: MockPhone }, { provide: <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a>, <a href="api/core/ValueSansProvider#useValue" class="code-anchor">useValue</a>: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) } ] }) .compileComponents(); }));</div><header class="ng-star-inserted">app/phone-detail/phone-detail.component.spec.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-detail/phone-detail.component.spec.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">

</span><span class="com">/* . . . */</span><span class="pln">

</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ActivatedRouteMock</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">public</span><span class="pln"> snapshot</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">/* . . . */</span><span class="pln">

  beforeEach</span><span class="pun">(</span><a href="api/core/testing/async" class="code-anchor"><span class="kwd">async</span></a><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">configureTestingModule</span><span class="pun">({</span><span class="pln">
      declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">CheckmarkPipe</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneDetailComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
      providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> useClass</span><span class="pun">:</span><span class="pln"> </span><span class="typ">MockPhone</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ValueSansProvider#useValue" class="code-anchor"><span class="pln">useValue</span></a><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ActivatedRouteMock</span><span class="pun">({</span><span class="pln"> </span><span class="kwd">params</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">'phoneId'</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
      </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">})</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">compileComponents</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}));</span></code>
    </pre></aio-code></code-example><p translation-result="on">对于电话列表组件，还要再做少量的调整，以便路由器能让 <code>RouteLink</code> 指令正常工作。</p><p translation-origin="off">And for the phone list component, a few adjustments to the router make the <code>RouteLink</code> directives work.</p><code-example path="upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts" region="routestuff" header="app/phone-list/phone-list.component.spec.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NO_ERRORS_SCHEMA" class="code-anchor">NO_ERRORS_SCHEMA</a> } from '@angular/core'; import { <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a> } from '@angular/router'; import { Observable, of } from 'rxjs'; import { <a href="api/core/testing/async" class="code-anchor">async</a>, <a href="api/core/testing/ComponentFixture" class="code-anchor">ComponentFixture</a>, <a href="api/core/testing/TestBed" class="code-anchor">TestBed</a> } from '@angular/core/testing'; import { <a href="api/common/testing/SpyLocation" class="code-anchor">SpyLocation</a> } from '@angular/common/testing'; import { PhoneListComponent } from './phone-list.component'; import { Phone, PhoneData } from '../core/phone/phone.service'; /* . . . */ beforeEach(<a href="api/core/testing/async" class="code-anchor">async</a>(() =&gt; { TestBed.configureTestingModule({ declarations: [ PhoneListComponent ], providers: [ { provide: <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a>, <a href="api/core/ValueSansProvider#useValue" class="code-anchor">useValue</a>: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }, { provide: <a href="api/common/Location" class="code-anchor">Location</a>, useClass: <a href="api/common/testing/SpyLocation" class="code-anchor">SpyLocation</a> }, { provide: Phone, useClass: MockPhone }, ], schemas: [ <a href="api/core/NO_ERRORS_SCHEMA" class="code-anchor">NO_ERRORS_SCHEMA</a> ] }) .compileComponents(); })); beforeEach(() =&gt; { fixture = TestBed.createComponent(PhoneListComponent); });</div><header class="ng-star-inserted">app/phone-list/phone-list.component.spec.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/phone-list/phone-list.component.spec.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NO_ERRORS_SCHEMA" class="code-anchor"><span class="pln">NO_ERRORS_SCHEMA</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Observable</span><span class="pun">,</span><span class="pln"> of </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'rxjs'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/testing/async" class="code-anchor"><span class="kwd">async</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/testing/ComponentFixture" class="code-anchor"><span class="typ">ComponentFixture</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/testing/TestBed" class="code-anchor"><span class="typ">TestBed</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core/testing'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/testing/SpyLocation" class="code-anchor"><span class="typ">SpyLocation</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/testing'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./phone-list.component'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> </span><span class="typ">PhoneData</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../core/phone/phone.service'</span><span class="pun">;</span><span class="pln">

</span><span class="com">/* . . . */</span><span class="pln">

  beforeEach</span><span class="pun">(</span><a href="api/core/testing/async" class="code-anchor"><span class="kwd">async</span></a><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">configureTestingModule</span><span class="pun">({</span><span class="pln">
      declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">PhoneListComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
      providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ValueSansProvider#useValue" class="code-anchor"><span class="pln">useValue</span></a><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ActivatedRouteMock</span><span class="pun">({</span><span class="pln"> </span><span class="kwd">params</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">'phoneId'</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/Location" class="code-anchor"><span class="typ">Location</span></a><span class="pun">,</span><span class="pln"> useClass</span><span class="pun">:</span><span class="pln"> </span><a href="api/common/testing/SpyLocation" class="code-anchor"><span class="typ">SpyLocation</span></a><span class="pln"> </span><span class="pun">},</span><span class="pln">
        </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Phone</span><span class="pun">,</span><span class="pln"> useClass</span><span class="pun">:</span><span class="pln"> </span><span class="typ">MockPhone</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">],</span><span class="pln">
      schemas</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><a href="api/core/NO_ERRORS_SCHEMA" class="code-anchor"><span class="pln">NO_ERRORS_SCHEMA</span></a><span class="pln"> </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">})</span><span class="pln">
    </span><span class="pun">.</span><span class="pln">compileComponents</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}));</span><span class="pln">

  beforeEach</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    fixture </span><span class="pun">=</span><span class="pln"> </span><span class="typ">TestBed</span><span class="pun">.</span><span class="pln">createComponent</span><span class="pun">(</span><span class="typ">PhoneListComponent</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">});</span></code>
    </pre></aio-code></code-example></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="从 AngularJS 升级到 Angular"><a href="guide/upgrade#upgrading-from-angularjs-to-angular">从 AngularJS 升级到 Angular</a></li><li class="h2 ng-star-inserted" title="准备工作"><a href="guide/upgrade#preparation">准备工作</a></li><li class="h3 ng-star-inserted" title="遵循 AngularJS 风格指南"><a href="guide/upgrade#follow-the-angularjs-style-guide">遵循 AngularJS 风格指南</a></li><li class="h3 ng-star-inserted" title="使用模块加载器"><a href="guide/upgrade#using-a-module-loader">使用模块加载器</a></li><li class="h3 ng-star-inserted" title="迁移到 TypeScript"><a href="guide/upgrade#migrating-to-typescript">迁移到 TypeScript</a></li><li class="h3 ng-star-inserted" title="使用组件型指令"><a href="guide/upgrade#using-component-directives">使用组件型指令</a></li><li class="h2 ng-star-inserted" title="使用升级适配器进行升级"><a href="guide/upgrade#upgrading-with-ngupgrade">使用升级适配器进行升级</a></li><li class="h3 ng-star-inserted" title="升级模块工作原理"><a href="guide/upgrade#how-ngupgrade-works">升级模块工作原理</a></li><li class="h3 ng-star-inserted" title="通过 Angular 的 NgModule 来使用 UpgradeModule"><a href="guide/upgrade#using-upgrademodule-with-angular-ngmodules">通过 Angular 的 <em>NgModule</em> 来使用 UpgradeModule</a></li><li class="h3 ng-star-inserted" title="引导混合式应用程序"><a href="guide/upgrade#bootstrapping-hybrid-applications">引导混合式应用程序</a></li><li class="h3 ng-star-inserted" title="在 AngularJS 的代码中使用 Angular 的组件"><a href="guide/upgrade#using-angular-components-from-angularjs-code">在 AngularJS 的代码中使用 Angular 的组件</a></li><li class="h3 ng-star-inserted" title="从 Angular 代码中使用 AngularJS 组件型指令"><a href="guide/upgrade#using-angularjs-component-directives-from-angular-code">从 Angular 代码中使用 AngularJS 组件型指令</a></li><li class="h3 ng-star-inserted" title="把 AngularJS 的内容投影到 Angular 组件中"><a href="guide/upgrade#projecting-angularjs-content-into-angular-components">把 AngularJS 的内容投影到 Angular 组件中</a></li><li class="h3 ng-star-inserted" title="把 Angular 的内容透传进 AngularJS 的组件型指令"><a href="guide/upgrade#transcluding-angular-content-into-angularjs-component-directives">把 Angular 的内容透传进 AngularJS 的组件型指令</a></li><li class="h3 ng-star-inserted" title="让 AngularJS 中的依赖可被注入到 Angular"><a href="guide/upgrade#making-angularjs-dependencies-injectable-to-angular">让 AngularJS 中的依赖可被注入到 Angular</a></li><li class="h3 ng-star-inserted" title="让 Angular 的依赖能被注入到 AngularJS 中"><a href="guide/upgrade#making-angular-dependencies-injectable-to-angularjs">让 Angular 的依赖能被注入到 AngularJS 中</a></li><li class="h2 ng-star-inserted" title="惰性加载 AngularJS"><a href="guide/upgrade#lazy-loading-angularjs">惰性加载 AngularJS</a></li><li class="h3 ng-star-inserted" title="为惰性加载 AngularJS 创建一个服务"><a href="guide/upgrade#create-a-service-to-lazy-load-angularjs">为惰性加载 AngularJS 创建一个服务</a></li><li class="h3 ng-star-inserted" title="创建一个用来渲染 AngularJS 内容的组件"><a href="guide/upgrade#create-a-component-to-render-angularjs-content">创建一个用来渲染 AngularJS 内容的组件</a></li><li class="h3 ng-star-inserted" title="为那些 AngularJS 路由配置自定义路由匹配器"><a href="guide/upgrade#configure-a-custom-route-matcher-for-angularjs-routes">为那些 AngularJS 路由配置自定义路由匹配器</a></li><li class="h2 ng-star-inserted" title="使用统一的 Angular 位置服务（Location）"><a href="guide/upgrade#using-the-unified-angular-location-service">使用统一的 Angular 位置服务（Location）</a></li><li class="h2 ng-star-inserted" title="在混合式应用中使用 AOT 编译"><a href="guide/upgrade#using-ahead-of-time-compilation-with-hybrid-apps">在混合式应用中使用 AOT 编译</a></li><li class="h2 ng-star-inserted" title="PhoneCat 升级教程"><a href="guide/upgrade#phonecat-upgrade-tutorial">PhoneCat 升级教程</a></li><li class="h3 ng-star-inserted" title="切换到 TypeScript"><a href="guide/upgrade#switching-to-typescript">切换到 TypeScript</a></li><li class="h3 ng-star-inserted" title="安装 Angular"><a href="guide/upgrade#installing-angular">安装 Angular</a></li><li class="h3 ng-star-inserted" title="创建 AppModule"><a href="guide/upgrade#creating-the-appmodule">创建 <em>AppModule</em></a></li><li class="h3 ng-star-inserted" title="引导 PhoneCat 的混合式应用"><a href="guide/upgrade#bootstrapping-a-hybrid-phonecat">引导 PhoneCat 的混合式应用</a></li><li class="h3 ng-star-inserted" title="升级 Phone 服务"><a href="guide/upgrade#upgrading-the-phone-service">升级 <code>Phone</code> 服务</a></li><li class="h3 ng-star-inserted" title="升级组件"><a href="guide/upgrade#upgrading-components">升级组件</a></li><li class="h3 ng-star-inserted" title="对混合式应用做 AOT 编译"><a href="guide/upgrade#aot-compile-the-hybrid-app">对混合式应用做 AOT 编译</a></li><li class="h3 ng-star-inserted" title="添加 Angular 路由器和引导程序"><a href="guide/upgrade#adding-the-angular-router-and-bootstrap">添加 Angular 路由器和引导程序</a></li><li class="h3 ng-star-inserted" title="再见，AngularJS！"><a href="guide/upgrade#say-goodbye-to-angularjs">再见，AngularJS！</a></li><li class="h2 ng-star-inserted" title="附录：升级 PhoneCat 的测试"><a href="guide/upgrade#appendix-upgrading-phonecat-tests">附录：升级 PhoneCat 的测试</a></li><li class="h3 ng-star-inserted" title="E2E 测试"><a href="guide/upgrade#e2e-tests">E2E 测试</a></li><li class="h3 ng-star-inserted" title="单元测试"><a href="guide/upgrade#unit-tests">单元测试</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.79+sha.55f1ef01.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.ee607cf78010348c8334.js" type="module"></script><script src="runtime-es5.ee607cf78010348c8334.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.9cd62e243bd182514a19.js" type="module"></script><script src="main-es5.9cd62e243bd182514a19.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>